欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css使用@media響應(yīng)式適配各種屏幕的方法示例

  發(fā)布時(shí)間：2020-05-14 16:14:04   作者：不睡   我要評論
這篇文章主要介紹了css使用@media響應(yīng)式適配各種屏幕的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

定義和使用

使用 @media 查詢，你可以針對不同的媒體類型定義不同的樣式。

@media 可以針對不同的屏幕尺寸設(shè)置不同的樣式，特別是如果你需要設(shè)置設(shè)計(jì)響應(yīng)式的頁面，@media 是非常有用的。

當(dāng)你重置瀏覽器大小的過程中，頁面也會根據(jù)瀏覽器的寬度和高度重新渲染頁面。

PC端設(shè)備屏幕的寬度

頁面寬度大于1000px（>=1000）且小于1200px（<=1200）的時(shí)候執(zhí)行下面的CSS（實(shí)際剛好“>=1000”或“<=1200”的都執(zhí)行）

@media screen and (min-width:1000px) and (max-width: 1200px){
    .cont_li{
        width: 50px;
        margin-left: 7px;
        padding-left: 9px;
    }
}

注意以下順序，如果把@media (min-width: 768px)寫在了最下方，那么很悲劇，

@media (min-width: 1200){ //>=1200的設(shè)備 }
@media (min-width: 992px){ //>=992的設(shè)備 }
@media (min-width: 768px){ //>=768的設(shè)備 }

這是因?yàn)槿绻聊粚挾仁?440，由于1440>768那么1200就會失效。

所以在使用min-width時(shí)，小的在前面，大的在后面；同理，如果使用max-width時(shí)，就是大的在前面，小的在后面：

@media (min-width: 768px){ //>=768的設(shè)備 }
@media (min-width: 992px){ //>=992的設(shè)備 }
@media (min-width: 1200){ //>=1200的設(shè)備 }

@media (max-width: 1199){ //<=1199的設(shè)備 }
@media (max-width: 991px){ //<=991的設(shè)備 }
@media (max-width: 767px){ //<=768的設(shè)備 }

PC屏幕自適應(yīng)CSS3代碼：

/*當(dāng)頁面寬度大于1000px且小于1200px的時(shí)候執(zhí)行，1000-1200*/
@media screen and (min-width:1000px) and (max-width: 1200px){
    body{
        font-size:16px
    }
}
/*當(dāng)頁面寬度大于1280px且小于1366px的時(shí)候執(zhí)行,1280-1366*/
@media screen and (min-width:1280px) and (max-width: 1366px){
    body{
        font-size:18px
    }
}
/*當(dāng)頁面寬度大于1440px且小于1600px的時(shí)候執(zhí)行,1440-1600*/
@media screen and (min-width:1440px) and (max-width:1600px){
    body{
        font-size:20px
    }
}
/*當(dāng)頁面寬度大于1680px且小于1920px的時(shí)候執(zhí)行,1680-1920*/
@media screen and (min-width:1680px) and (max-width:1920px){
    body{
        font-size:22px
    }
}

電腦屏幕尺寸的例表得到了幾個(gè)寬度：1024、1200、1280、1366、1440、1600、1680、1920。

移動端設(shè)備屏幕的寬度

rem（font size of the root element）是指相對于根元素的字體大小的單位。簡單的說它就是一個(gè)相對單位?？吹絩em大家一定會想起em單位，em（font size of the element）是指相對于父元素的字體大小的單位。它們之間其實(shí)很相似，只不過一個(gè)計(jì)算的規(guī)則是依賴根元素一個(gè)是依賴父元素計(jì)算。

所以這里總結(jié)一句，所謂依賴根元素來計(jì)算的方式，就是先給予html元素一個(gè)font-size，然后我們所有的rem就根據(jù)這個(gè)font-size來計(jì)算，例如：

html{ font-size:16px;}

那么我們這里的1rem就應(yīng)該這么來計(jì)算：1x16=16px=1rem；

移動端字體：

@media screen and (min-width: 320px) {html{font-size:50px;}}
@media screen and (min-width: 360px) {html{font-size:56.25px;}}
@media screen and (min-width: 375px) {html{font-size:58.59375px;}}
@media screen and (min-width: 400px) {html{font-size:62.5px;}}
@media screen and (min-width: 414px) {html{font-size:64.6875px;}}
@media screen and (min-width: 440px) {html{font-size:68.75px;}}
@media screen and (min-width: 480px) {html{font-size:75px;}}
@media screen and (min-width: 520px) {html{font-size:81.25px;}}
@media screen and (min-width: 560px) {html{font-size:87.5px;}}
@media screen and (min-width: 600px) {html{font-size:93.75px;}}
@media screen and (min-width: 640px) {html{font-size:100px;}}
@media screen and (min-width: 680px) {html{font-size:106.25px;}}
@media screen and (min-width: 720px) {html{font-size:112.5px;}}
@media screen and (min-width: 760px) {html{font-size:118.75px;}}
@media screen and (min-width: 800px) {html{font-size:125px;}}
@media screen and (min-width: 960px) {html{font-size:150px;}}

移動端屏幕自適應(yīng)CSS3代碼：

@media screen and (min-width:320px) and (max-width:360px){
    body{
        font-size: 12px;
    }
}
@media screen and (min-width:360px) and (max-width:390px){
    body{
        font-size: 13px;
    }
}
@media screen and (min-width:390px) and (max-width:460px){
    body{
        font-size: 14px;
    }
}

@media screen and (min-width:320px) and (max-width:460px){
    body{
        font-size: 12.5px;
    }
}

到此這篇關(guān)于css使用@media響應(yīng)式適配各種屏幕的方法示例的文章就介紹到這了,更多相關(guān)@media響應(yīng)式適配屏幕內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論