成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

CSS-@media詳解。

keelii / 3611人閱讀

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

CSS3@media查詢

使用@media查詢，你可以針對(duì)不同的媒體類型定義不同的樣式。
@media可以針對(duì)不同的屏幕尺寸設(shè)置不同的樣式，特別是如果你需要設(shè)計(jì)響應(yīng)式的頁面，@media是非常有用的。
當(dāng)你重置瀏覽器大小的過程中，頁面也會(huì)根據(jù)瀏覽器的寬度和高度重新渲染頁面。
媒體類型還支持not和only關(guān)鍵字，它們可以用來更方便的定位某個(gè)媒體設(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時(shí)，將采用small.css樣式來渲染W(wǎng)eb頁面。
2.最小寬度Min Width:

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

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

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)頁時(shí)，縮小或放大瀏覽器時(shí)是不執(zhí)行CSS的，因?yàn)椤甈C設(shè)備’沒有變化。但如果使用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è)備用戶使用max-device-width；面向PC設(shè)備用戶使用max-width。
看看下面的寫法：

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/102401.html

相關(guān)文章

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

    摘要：布局經(jīng)典問題初步整理標(biāo)簽前端本文主要對(duì)布局中常見的經(jīng)典問題進(jìn)行簡單說明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù)，清除浮動(dòng)，居中布局，響應(yīng)式設(shè)計(jì)，布局，等等。 CSS 布局經(jīng)典問題初步整理 標(biāo)簽 ： 前端 [TOC] 本文主要對(duì) CSS 布局中常見的經(jīng)典問題進(jìn)行簡單說明，并提供相關(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è)人使用過的移動(dòng)端布局方法

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

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

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

0條評(píng)論

閱讀需要支付1元查看
<