0.meta:vp
做移動端頁面時姐帚，二話不說先加一句
<meta name="viewport" content="width=device-width , user-scalable=no , initial-scale=1.0 , maximum-scale=1.0 , minimum-scale=1.0">
別問，問就是防止瀏覽器自動縮放
1.響應(yīng)式布局（responsive）
響應(yīng)式布局可使網(wǎng)站在不同的設(shè)備上瀏覽時對應(yīng)不同分辨率皆有適合的呈現(xiàn)
其布局通過媒體查詢@media實現(xiàn)疲憋，詳見：http://www.reibang.com/p/c6d82db7ad62
新聞及門戶網(wǎng)站可以用響應(yīng)式布局随闪，但大型網(wǎng)站媒體查詢有其局限性
因此實際工作中不常見，但面試會考
實際上除了響應(yīng)式奶栖，網(wǎng)站通常會采用：1.提供兩套html由后端根據(jù)用戶設(shè)備來切換 2.提供兩個完全不同的url由后端根據(jù)用戶設(shè)備來跳轉(zhuǎn)
2.通過動態(tài)rem實現(xiàn)
什么是rem
css常見的單位有： px塞蹭，em孽江，rem ，vh 番电，vw
- rem：root em 即根元素的字體大小
- em：一個字的寬度（一般指字母m）岗屏，它的大小與其
font-size一樣 - vh： 100vh === 視口高度
- vw： 100vw === 適口寬度
需要注意：
- 網(wǎng)頁字體默認(rèn)大小16px，em漱办、rem默認(rèn)情況下都是16px
- chrome可以在瀏覽器設(shè)置中自行設(shè)置最小字號这刷，無論控制樣式多小都不會小于這個值，這個值默認(rèn)12px
為什么動態(tài)rem可以實現(xiàn)移動端適配
動態(tài)rem可以做到度量單位與頁面寬度相聯(lián)系娩井，我們知道設(shè)計頁面時單位以寬度為標(biāo)準(zhǔn)方能保證完美還原設(shè)計稿暇屋。
這也是不采用百分比布局的原因：百分比布局的寬與高之間沒辦法有聯(lián)系（而不用vw是因為兼容性太差）
正是因為它是動態(tài)變化的，所以可以用一套移動端css樣式來適配不同分辨率的移動端頁面
如何實現(xiàn)
<script>
document.write(` <style>{html{font-size:${window.innerWidth}px}}</style>`)
</script>
通過上述代碼就可以實現(xiàn)1rem === 頁面寬度
在實際操作中遇到較小的洞辣，固定不動的樣式可以與px等其他單位混用咐刨，像字體大小固定16px并不影響美觀
3.實現(xiàn)px2rem
通過sass來實現(xiàn)px與rem的自動轉(zhuǎn)換
- 創(chuàng)建一個文件昙衅，并在里面安裝sass
npm i node-sass
2.在該文件中再創(chuàng)建兩個文件，一個sass文件定鸟，一個css文件
3.在sass文件中創(chuàng)建一個.scss為后綴的樣式文件
4.用node-sass對該文件進(jìn)行監(jiān)聽并將scss文件轉(zhuǎn)換成.css樣式文件輸出到css文件夾
node-sass -wr scss -o css
通過以上命令就可以實時得到css文件了
5.對.scss文件進(jìn)行編輯
@function px( $px ){
@return $px/$designWidth + rem;
}
$designWidth : 640; // 640 是設(shè)計稿的寬度而涉，你要根據(jù)設(shè)計稿的寬度填寫。如果設(shè)計師的設(shè)計稿寬度不統(tǒng)一联予，就殺死設(shè)計師啼县，換個新的。
并在html文件中添加以下代碼沸久，并引入.css文件
<script>
document.write(` <style>{html{font-size:${window.innerWidth}px}}</style>`)
</script>
這樣1rem === 640px季眷， 1rem代表著整個頁面的寬度
我們在.scss文件中對元素添加樣式width:px(320)就可以規(guī)定元素寬度為頁面的一半
