視口介紹
1抢蚀、布局視口(layout viewpor)
var width=document.documentElement.clientWidth
?可以看作為當前頂級HTML元素的寬度，也就是咱們?yōu)g覽器當前的可視區(qū)域的寬度稠集，咱們的媒體查詢max-width和min-width的值也是布局視口的寬度狠轻，布局視口中的寬度和高度都是像素剃诅，也就是px偷遗，是一個抽象單位粱年。??布局視口寬度受到meta標簽內的width屬性和initial-scale的影響圈盔，僅設置width的值時豹芯，這個值就是布局視口的寬度，它的值可以是正整數或者特殊值device-width驱敲。??布局視口寬 = 可視視口寬時html 元素正好橫向鋪滿窗口（但其后代元素若有橫向 overflow 的情況铁蹈，仍然會出現滾動條），布局視口寬 > 可視視口寬時众眨，出現橫向滾動條握牧。
2 : 可視視口(visual viewport)
var width=window.innerWidth
?可視視口是當前可見區(qū)域的CSS像素數，和布局視口差不多娩梨，區(qū)別可視視口的寬度決定了將頁面分成了多少份沿腰，每份對應一個CSS像素”范ǎ可視視口受到縮放比例的影響矫俺，在meta標簽內設置了initial-scale=0.5 后會改變可視視口的尺寸，可視視口尺寸越小顯示的CSS像素數也越少掸冤，則單位CSS像素數對應的可視區(qū)域越大厘托，對應的縮放比例也就越大「迨縮放比例是相對于理想視口而言縮放比例 = 理想視口尺寸/可是視口尺寸铅匹，而當沒有設置initial-scale的時候，瀏覽器會取適當的縮放比例饺藤，一般情況下為1包斑，使布局正好鋪滿屏幕，此時布局視口尺寸 = 可視視口尺寸涕俗。
3 : 理想視口(ideal viewport)
var width=screen.width
理想視口是一個比較適合移動布局的視口尺寸罗丰，作為計算布局視口和可視視口尺寸的基準值，上面mete標簽中的device-width 就是理想視口的寬度再姑。上面三個視口屬性中萌抵，只有理想視口是不可以改變的，因為理想視口的寬度拒絕與設備的物理像素比存在著比例的關系，這個比例叫做設備像素比(device pixel ratio绍填，dpr)霎桅。
公式為 :設備像素比 = 物理像素數 / 理想視口尺寸。
iPhone 物理寬度像素 640 理想視口寬度 320 設備像素比 2
?var c=window.devicePixelRatio 這樣可以獲取設備像素比(Android系統(tǒng)下可能不符合預期)讨永，由于沒有禁用縮放屬性,手動縮放不會影響布局視口或者理想視口滔驶，只會影響到可視視口的尺寸，而且可能導致布局視口小于理想視口卿闹。設置 initial-scale 的值時揭糕，布局視口的尺寸與可視視口的計算方式相同，但不受手動縮放的影響同時設置 width 和 intial-scale 的值時锻霎，布局視口的寬取上述兩個值中較大的一個著角。
總結
?1 : 將meta標簽中的width設為device-width時,布局視口 = 可視視口 = 理想視口,這時設備像素比,設備像素比 = 物理像素 / 理想視口尺寸 = 物理像素比 / 布局視口尺寸,對iphone而言,一個CSS像素對應4個物理像素。
?? 2 : initial-scale 設置任意合法的值同時禁用手動縮放時,布局視口 = 可視視口量窘。
?? 3 : initial-scale 設置為1時也可以使布局視口 = 可視視口 =理想視口。
flexible的適配方案
flexible方案會把視覺稿分為100份氢拥，主要是為了更好的兼容vh 和 vw 蚌铜，而每一份被稱為一個單位a，同時1rem單位被認定為10a嫩海。假設設計稿是750px規(guī)格冬殃，1a = 750px/100，1rem = 10a = 75px叁怪，所以根元素相對應的font-size=75px审葬。
但在開發(fā)過程中我們怎么將設計稿的px轉換成相對單位的rem呢？
方法一: 根據計算轉換得到易于計算的比例值
剛才我們計算了設計稿1rem = 750px/10 = 75px , 實際屏幕1rem = clientWidth / 10; 根據比例得到 1rem = 75px = clientWidth/10 奕谭，我們發(fā)現根據上圖公式Math.floor(100?*?(clientWidth?/?750))發(fā)現右邊除以750在乘1000(為什么要成1000呢涣觉，為了減小計算誤差咯)，所以左邊也除以750在乘1000血柳，可以得到 1rem = 100px; 現在設計稿有段長度是240px官册，口算得到相對單位2.4rem
方法二：根據css預編譯sass或less的函數來計算rem值
根據設計稿得到1rem = 75px; 編寫scss文件
//? ?rem.scss
$baseUnit = 75px;
@function pxToRem($px){
? ? @return $px / $baseUnit + 'rem'
}
// 如何使用
@import 'rem.scss'
div {
? ? height:?pxToRem(200)
}
方法三：借助插件自動計算:px2rem,postcss-pxtorem等，請自行選擇难捌，這里介紹在Vue中使用px2rem膝宁。
? ? 1 、npm install px2rem-loader
? ? 2根吁、在vue-cli 項目中build下的 utils.js中员淫，找到generateLoaders 方法修改配置
var px2remLoader={
loader:'px2rem-loader',
options:{
????remUnit:75 // 設計稿寬度/10
}};
// generate loader string to be used with extract text plugin
function generateLoaders(loader,loaderOptions){
????var loaders=[cssLoader,px2remLoader];//添加px2rem 插件
????if(loader){
????????loaders.push({
????????loader:loader+'-loader',
????????options:Object.assign({},loaderOptions,{sourceMap:options.sourceMap})
????})
}
3、vue-cli3.0中需要在vue.config.js中配置 chainWebpack
chainWebpack: config=> {
????config.module
????.rule('scss')
????.oneOf('vue')
????.use('px2rem-loader')
????.loader('px2rem-loader')
????.before('postcss-loader') // this makes it work.
????.options({remUnit:75})
????.end()
}
現在就可以在項目中愉快的使用px了击敌，設計稿是多少介返，就寫多少，自動轉換成rem,不要太爽
注意：這里是通過自定義函數來設置根元素html的字體大小（即rem）,我們可以使用淘寶的庫lib-flexible,這個庫會自動計算設置根元素html的字體大小
npm install lib-flexible -save 然后在main.js 中引入這個文件
// main.js
import 'lib-flexible/flexible'
參考文章：
