自適應頁面的實現方式

CSS3 媒體查詢 media

媒體查詢技術的原理：通過匹配不同屏幕設備的特征,讓不同特征下的CSS代碼生效。
常用匹配特征 media features
width/height: 瀏覽器寬高
max-width： 表示小於最大寬度時生效
min-width： 表示大於最小寬度時生效
device-width/device-height: 設備屏幕分辨率寬高
resolution: 設備分辨率
orientation：portrait(縱向),高度大於等於寬度時，landscape(橫向),高度小於寬度時

media使用方式

1、link行內引入：

<link rel="stylesheet" type="text/css" href="style.css" media="screen and (min-width: 600px) and (max-width: 800px)">

2、media導入：

@media screen and (max-width: 990px){
    .container{
        background: orange;
    }
}

@media screen常用自適應方案

@media screen and (min-width:1200px){}
@media screen and (max-width:1200px){}
@media screen and (max-width:1024px){}
@media screen and (max-width:998px){}
@media screen and (max-width:768px){}
@media screen and (max-width:667px){}
@media screen and (max-width:540px){}
@media screen and (max-width:414px){}
@media screen and (max-width:375px){}
@media screen and (max-width:360px){}
@media screen and (max-width:320px){}
@media screen and (max-width:280px){}

移動端單位：rem

css3中的rem單位：https://www.cnblogs.com/liu-di/p/11254583.html https://www.jianshu.com/p/ccbe9eb285e2
如果設計師給的圖是750px，那么1rem就是750/16=46.875px，則div的寬度60px=（60/46.875）rem=1.28rem

 

頁面自適應，是指頁面內容自動適應屏幕大小。實現自適應的方法有多種：
1、簡易場景實現自適應：浮動、頁面居中、設置百分比屬性、自動匹配大小。這樣在頁面寬度發生變化時，能利用以上特性實現簡易的自適應效果。
2、如果實際開發中有復雜場景的需求，一般通過編寫多套CSS代碼，然后用媒體查詢技術，讓頁面根據不同屏幕尺寸來加載不同代碼模塊以實現適配不同屏幕的目的。這種方式需要編寫多套代碼，雖然工作量大，但對於不同屏幕尺寸的設備都有單獨一套CSS代碼，維護起來更方便。
3、響應式布局，響應式布局是指根據不同屏幕尺寸自動調整頁面顯示效果實現自適應(也要用到媒體查詢技術)。響應式布局一般有柵格系統布局，flex布局。bootstrap框架的核心就是柵格系統。 

 

flex布局自適應：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

參考：https://segmentfault.com/a/1190000015759719?utm_source=tag-newest