亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

CSS-@media詳解。

keelii / 3612人閱讀

摘要：最小寬度上面代碼表示當(dāng)屏幕大于或等于時，將采用樣式來渲染頁面。是目標(biāo)顯示區(qū)域的寬度，例如，瀏覽器寬度。如果使用，那么當(dāng)手機(jī)由豎變橫時，是執(zhí)行的，因為顯示區(qū)域發(fā)生了變化。通常，面向移動設(shè)備用戶使用面向設(shè)備用戶使用。

CSS3@media查詢

使用@media查詢，你可以針對不同的媒體類型定義不同的樣式。
@media可以針對不同的屏幕尺寸設(shè)置不同的樣式，特別是如果你需要設(shè)計響應(yīng)式的頁面，@media是非常有用的。
當(dāng)你重置瀏覽器大小的過程中，頁面也會根據(jù)瀏覽器的寬度和高度重新渲染頁面。
媒體類型還支持not和only關(guān)鍵字，它們可以用來更方便的定位某個媒體設(shè)備：

not:排除某種制定的媒體類型。
@media not print and(color){}
only:指定某種特定的媒體類型，可以用來排除不支持媒體查詢的瀏覽器；
@media only screen and(color){}


@media only screen and (max-width:500px){
    .gridmenu{
        width:100%;
    }
    .gridmain{
        width:100%;
    }
    .gridright{
        width:100%;
    }
}
@media的具體使用方式

1.最大寬度Max-Width:

上面代碼表示：當(dāng)屏幕小于600px時，將采用small.css樣式來渲染W(wǎng)eb頁面。
2.最小寬度Min Width:

上面代碼表示：當(dāng)屏幕大于或等于600時，將采用large.css樣式來渲染W(wǎng)eb頁面。
3.多個media使用：

上面的表示的是當(dāng)屏幕在600px-900px之間時采用style.css樣式來渲染web頁面。

max(min)-device-width和max(min)-width區(qū)別

max-device-width和max-width區(qū)別：
1.max-device-width是設(shè)備整個顯示區(qū)域的寬度，例如，真實的設(shè)備屏幕寬度。
2.max-width是目標(biāo)顯示區(qū)域的寬度，例如，瀏覽器寬度。
3.如果使用max-device-width，那么在PC瀏覽器上瀏覽網(wǎng)頁時，縮小或放大瀏覽器時是不執(zhí)行CSS的，因為‘PC設(shè)備’沒有變化。但如果使用max-width，縮小或放大瀏覽器時是執(zhí)行CSS的，因為顯示區(qū)域即瀏覽器大小發(fā)生了變化。
4.如果使用max-device-width，那么當(dāng)手機(jī)由豎變橫時，CSS是執(zhí)行的，因為顯示區(qū)域發(fā)生了變化。
5.通常，面向移動設(shè)備用戶使用max-device-width；面向PC設(shè)備用戶使用max-width。
看看下面的寫法：

/*移動設(shè)備*/
@media screen and (max-device-width:480px){
    /*CSS代碼*/
}
/*PC*/
@media screen and(max-width:1024px){
    /*CSS代碼*/
}

min-device-width和min-width的區(qū)別，跟max-device-width和max-width的區(qū)別是一樣的。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/102401.html

相關(guān)文章

  • CSS 布局經(jīng)典問題初步整理

    摘要：布局經(jīng)典問題初步整理標(biāo)簽前端本文主要對布局中常見的經(jīng)典問題進(jìn)行簡單說明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù)，清除浮動，居中布局，響應(yīng)式設(shè)計，布局，等等。 CSS 布局經(jīng)典問題初步整理 標(biāo)簽 ： 前端 [TOC] 本文主要對 CSS 布局中常見的經(jīng)典問題進(jìn)行簡單說明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù) margin，清除浮動，居中布局，響應(yīng)式設(shè)計，F(xiàn)l...

    Amos 評論0 收藏0

  • css:Media Queries: How to target desktop, tablet a

    摘要：涂聚文涂聚文 Media Queries: How to target desktop, tablet and mobile? /* Media Queries: How to target desktop, tablet and mobile? http://webdesignerwall.com/tutorials/css3-media-queries https:/...

    fevin 評論0 收藏0

  • 總結(jié)個人使用過的移動端布局方法

    摘要：而淘寶移動端方案，還根據(jù)你的去計算，而且會進(jìn)行整體的縮放。淘寶的這種方案，比上面的代碼會好很多。淘寶的方案，解決了另一個問題邊框的問題。 這篇文章，主要是總結(jié)一下，我在移動端布局用過的方法。有三種，一種是響應(yīng)式布局，利用@meida判斷各個size；第二種是REM；最后是設(shè)置viewport中的width。 響應(yīng)式布局 這種感覺是最好理解了，利用@media進(jìn)行斷點，在每個斷點中編寫c...

    馬龍駒 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<