[TOC] ## 概述 ### rem 和 em * rem 即：‘The font size of the root element’，就是以根元素 的字體大小為基本單位，是一種相對單位。rem 適配的原理就是以 html 的 font-size 大小為基本單位來布局。 * em 是另一種相對單位，它相對于該元素本身的 font-size 值來計算。 ### vw ## 移動端適配方案 ### 1. 媒體查詢 link 元素中的 CSS 媒體查詢，不同屏幕加載不同樣式文件： ``` <link rel="stylesheet" media="(max-width: 500px)" href="mobile.css" /> <link rel="stylesheet" media="(min-width: 980px)" href="pc.css" /> ``` CSS 樣式表中的媒體查詢： ``` @media only screen and (max-width: 414px){ html{ font-size: 64px; } } @media only screen and (max-width: 375px){ html{ font-size: 58px; } } @media only screen and (max-width: 360px){ html{ font-size: 56px; } } @media only screen and (max-width: 320px){ html{ font-size: 50px; } } ``` ### 2.動態 rem 方案 對于不同屏幕，我們只需要動態修改根元素字體大小，元素大小就會同比例改變，從而做到頁面的自動適配效果 - 假設設計稿寬度為 750px，元素A寬度為 300px，在屏幕寬度為 375pt 的屏幕中，設置根元素字體大小為 75px，則元素A寬度為 4rem； - 在屏幕寬度為 750pt 的屏幕中，只需將根元素字體大小改為 150px，不需要改變元素A的大小，就可以做到頁面適配 ``` (function flexible (window, document) { var docEl = document.documentElement // 根據屏幕寬度設置根元素字體大小，set 1rem = viewWidth / 10 function setRemUnit () { var rem = docEl.clientWidth / 10 docEl.style.fontSize = rem + 'px' } setRemUnit() // reset rem unit on page resize window.addEventListener('resize', setRemUnit) window.addEventListener('pageshow', function (e) { if (e.persisted) { setRemUnit() } }) }(window, document)) ``` **文本字號不建議使用 rem** 使用動態 rem 方案需要做的工作 ### 3. Viewport 方案（推薦） 面介紹的動態 rem 方案，其本質是讓頁面元素大小跟隨屏幕寬度的變化成比例縮放。 CSS Viewport units （視口單位）正是一種相對于屏幕寬高的一種長度單位，并且兼容性越來越好。視口單位有：vw、vh、vmin和vmax。vw 單位表示根元素寬度的百分比，1vw 等于視口寬度的1%。 vw 適配方案的流程： 1. meta 標簽設置 viewport 寬度為屏幕寬度； 2. 開發環境配置 [postcss-px-to-viewport](https://link.juejin.cn?target=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fpostcss-px-to-viewport "https://www.npmjs.com/package/postcss-px-to-viewport") 或者類似插件； 3. 根據設計稿寫樣式，元素寬高直接取設計稿寬高即可，單位為 px，插件會將其轉換為 vw； 4. 段落文本也按照設計稿寫，單位為px，不需要轉換為 vw； ### 4.固定 Viewport 寬度方案（整體縮放） 所謂固定 viewport 寬度，即將網頁布局視口的寬度設置為設計稿的寬度，不管是在哪種設備上，網頁的布局視口寬度都是固定的 如果設計稿的寬度為 750px，那么我們就可以將布局視口設置如下： ``` <meta name="viewport" content="width=750, user-scalable=no" /> ```