做一個響應(yīng)式布局的頁面咆课，我們第一時間會想到通過rem單位來實(shí)現(xiàn)適配末誓，但是往往還需要內(nèi)嵌一段腳本去動態(tài)計(jì)算跟元素大小，有點(diǎn)不方便书蚪。
比如：
我們需要一個單位喇澡，但不需要JS和CSS耦合在一？那么就是vw／vh殊校。
vw=view width（視口寬度）
vh=view height（視口高度）
這兩個單位是CSS3引入的晴玖，以上稱為視口單位允許我們更接近瀏覽器窗口定義大小。
視口單位(Viewport units)
Q：什么是視口？
A：Peter-Paul Koch（”PPK大神”）提出視口的解釋是：在桌面端呕屎，視口指的是在桌面端让簿，指的是瀏覽器的可視區(qū)域；而在移動端秀睛，它涉及3個視口：Layout Viewport（布局視口）尔当，Visual Viewport（視覺視口），Ideal Viewport（理想視口）琅催。
視口單位中的“視口”居凶，桌面端指的是瀏覽器的可視區(qū)域；移動端指的就是Viewport中的Layout Viewport藤抡。
單位解釋
vw： ?? ? ? ? ? 1vw = 視口寬度的1%
vh： ? ????????? 1vh = 視口高度的1%
vmin???????? ?? 選取vw和vh中最小的那個
vmax???????? ? 選取vw和vh中最大的那個
比如：瀏覽器視口尺寸為370px,那么 1vw = 370px * 1% = 6.5px(瀏覽器會四舍五入向上取7)
vh/vw與%區(qū)別在于侠碧，
單位依賴于
%???????????????????????? 元素的祖先元素
vh/vw?????????????????? 視口的尺寸
僅使用vw作為CSS單位
使用 vw 單位作為唯一應(yīng)用的一種 CSS 單位的這種做法下
1.根據(jù)設(shè)計(jì)稿的尺寸轉(zhuǎn)換為vw單位(SASS函數(shù)編譯)
//我們以iPhone 6尺寸作為設(shè)計(jì)稿基準(zhǔn)
$vm_base: 375;
???? @function vm($px) {
?????? @return ($px / 375) * 100vw;
}
2.無論是文本還是布局高寬、間距等都使用 vw
導(dǎo)航入口
會得到這樣的效果：
最優(yōu)做法——搭配vw和rem
使用vm作為css單位代碼量確實(shí)減少很多缠黍，但是你會發(fā)現(xiàn)它是利用視口單位實(shí)現(xiàn)弄兜，依賴于視口大小而自動縮放，失去了最大最小寬度的限制瓷式。
所以替饿，我們需要結(jié)合rem單位來實(shí)現(xiàn)布局，而rem正好可以動態(tài)改變根元素大小贸典，做法是：
給根元素大小設(shè)置vw–動態(tài)改變大小视卢。
限制根元素font-size的最大最小值，配合body加上最大最小寬度廊驼。
// rem 單位換算：定為 75px 只是方便運(yùn)算据过，750px-75px、640-64px妒挎、1080px-108px绳锅，如此類推
$vm_fontsize: 75; // iPhone 6尺寸的根元素大小基準(zhǔn)值
@function rem($px) {
@return ($px / $vm_fontsize ) * 1rem;
}
// 根元素大小使用 vw 單位
$vm_design: 750;
html {
font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw;
// 同時，通過Media Queries 限制根元素最大最小值
@media screen and (max-width: 320px) {
font-size: 64px;
}
@media screen and (min-width: 540px) {
font-size: 108px;
}
}
// body 也增加最大最小寬度限制酝掩，避免默認(rèn)100%寬度的 block 元素跟隨 body 而過大過小
body {
max-width: 540px;
min-width: 320px;
}
