css響應(yīng)式頁面

dcr309duan 發(fā)布于2019-08-29 15:19 / 1205人閱讀

摘要：視口寬度為設(shè)備寬度不要讓用戶縮放初始縮放倍數(shù)為最大縮放倍數(shù)為最小縮放倍數(shù)為響應(yīng)式頁面單位用或者，在確定屏幕高度的情況下可以用，在確定屏幕寬度的的情況下用。

媒體查詢后來者居上，blue會覆蓋red。

@media(max-width: 320px){
    body{
        background: red;
    }
}
@media(max-width: 425px){
    body{
        background: blue;
    }
}

解決：
1.用倒序的方法寫，滿足條件的在下面，就不會被覆蓋了。

@media(max-width: 425px){
    body{
        background: blue;
    }
}
@media(max-width: 320px){
    body{
        background: red;
    }
}

2.讓前后條件之間不要與交集，可用and連接，前后條件都要加括號。

@media(max-width: 320px){
    body{
        background: red;
    }
}
@media(min-width: 321px) and (max-width: 425px){
    body{
        background: blue;
    }
}

媒體查詢結(jié)果可用CSS文件代替里面的內(nèi)容，不滿足條件link不會生效，但是文件都會下載，如果等變了在下載，就來不及了。

在學(xué)習(xí)響應(yīng)式的過程中，寫了一個粗糙的響應(yīng)式頁面，通過改變?yōu)g覽器窗口的大小可以渲染不同CSS樣式


    


    
        
        
              //ul快捷創(chuàng)建方法：ul>li*5>a[href=#]{導(dǎo)航$}
            導(dǎo)航1
            導(dǎo)航2
            導(dǎo)航3
            導(dǎo)航4
            導(dǎo)航5
        

        
            導(dǎo)航1
            導(dǎo)航2
            導(dǎo)航3
            導(dǎo)航4
            導(dǎo)航5

Web頁面做移動端適配，加上這句話就可以了。

name="viewport"：視口
width=device-width：寬度為設(shè)備寬度
user-scalable=no：不要讓用戶縮放
initial-scale=1.0：初始縮放倍數(shù)為1.0
maximum-scale=1.0：最大縮放倍數(shù)為1.0
minimum-scale=1.0：最小縮放倍數(shù)為1.0

響應(yīng)式頁面CSS

CSS 單位用vh或者vw，在確定屏幕高度的情況下可以用vh，在確定屏幕寬度的的情況下用vw。
100vh是視口高度，頁面中元素的寬高的單位通過換算后，用vh，1vh是屏幕高度(px)除以100vh。
@media用max-width要用倒序，因為后來者居上，而用min-width用正序就可以了。
水平布局父元素用：display:flex;，子元素用：flex:1;