成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

CSS-@media詳解。

keelii / 3565人閱讀

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

CSS3@media查詢(xún)

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

not:排除某種制定的媒體類(lèi)型。
@media not print and(color){}
only:指定某種特定的媒體類(lèi)型，可以用來(lái)排除不支持媒體查詢(xún)的瀏覽器；
@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時(shí)，將采用small.css樣式來(lái)渲染W(wǎng)eb頁(yè)面。
2.最小寬度Min Width:

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

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

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

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

/*移動(dòng)設(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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/102401.html

相關(guān)文章

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

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

    Amos 評(píng)論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 評(píng)論0 收藏0

  • 總結(jié)個(gè)人使用過(guò)的移動(dòng)端布局方法

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

    馬龍駒 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<