css3媒體查詢初體驗

@media

媒體查詢能夠使瀏覽器根據不同尺寸的裝置讀取不同 css 文字。

如

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue
    }
}
複製程式碼

如果開啟機器瀏覽器寬度小於等於 300 那麼背景色將會是 lightblue

例子：

一個在大屏手機上正常顯示的網頁，在小屏手機上顯示不全，需要滾動，這時一套 css 就不能滿足要求，需要我們用以上技術來為小屏手機定製 css

大屏手機:

小屏手機:

如 iPhoneSE

這時我們需要用媒體查詢來修復這個問題讓他在小屏手機上能正常工作

@media screen and (max-width: 321px) {
    .small-media{
        height: 140px;
        overflow-y: scroll;
    }
}
複製程式碼

在動態生成的頁面加上類名 small-media

var productB = '\
<div class="small-media">\
<div class="butler_account_munber sub_div_mt10"> 賬套數: <div index="0" userCount="10">10使用者50賬套</div> <div index="1" userCount="50">50使用者100賬套</div> <div index="2" userCount="200">200使用者200賬套</div> <div index="3" userCount="500">500使用者500賬套</div> <div index="4" userCount="1000">1000使用者1000賬套</div> <div index="5" userCount="2000">2000使用者2000賬套</div> <div index="6" userCount="3000">3000使用者3000賬套</div> <div index="7" userCount="4000">4000使用者4000賬套</div> <div index="8" userCount="5000">5000使用者5000賬套</div> </div>\
<div class="butler_period_validity"> 有效期: <div>1年</div> <div>2年</div> <div>3年</div> <div>4年</div> <div>5年</div></div>\
<div class="butler_count"> 數量: <div>1</div></div>\
</div>\
'
複製程式碼

這樣一來在小屏手機上就能滾動

效果:

(完)

github

css3媒體查詢初體驗

@media

例子：

相關文章