rem+vw · javascript

[TOC] ### 1. 將mata標簽改成如下 ~~~ <meta name="viewport" content="width=device-width, initial-scale=2.0, maximum-scale=2.0, minimum-scale=2.0, user-scalable=no"> ~~~ ### 2. 設置font-size ~~~ //750px設計稿 html{ font-size: 13.3333vw;//(100px/750px)*100vw } //640px設計稿 html{ font-size: 15.625vw;//(100px/640px)*100vw } //1080px設計稿 html{ font-size: 9.25926vw;//(100px/1080px)*100vw } 說明：vw和rem的轉換 100 / 750 = 0.133333333333333vw 因為用視口單位度量，視口寬度為100vw，高度為100vh 所以 1px = 0.133333333333333vw 那么整個適口等于 0.133333333333333 * 100 = 13.3333333333333vw = 100px 故：100px = 1rem ~~~ ### 3. 使用 ~~~ div { // width: 100px; width: 1rem; } span { // height: 12px height: .12rem } ~~~ ### 4. 如果用過flexible適配方案的話，可能會更接受通過sass來計算，而且可以通過計算給body設置最大寬度和最小寬度，帶來更好的體驗 ~~~ // rem 單位換算：定為 75px 只是方便運算，750px-75px、640-64px、1080px-1080px，如此類推 $vw_fontsize: 75; // iPhone 6尺寸的根元素大小基準值 @function rem($px) { @return ($px / $vw_fontsize ) * 1rem; } // 根元素大小使用 vw 單位 $vw_design: 750; html { font-size: ($vw_fontsize / ($vw_design / 2)) * 100vw; //就是相當于20vw // 同時，通過Media Queries 限制根元素最大最小值 @media screen and (max-width: 320px) { font-size: 64px; } @media screen and (min-width: 540px) { font-size: 108px; } } // body 也增加最大最小寬度限制，避免默認100%寬度的 block 元素跟隨 body 而過大過小 body { max-width: 540px; min-width: 320px; } ~~~ ### 5. demo ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=2.0, maximum-scale=2.0, minimum-scale=2.0, user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0 } html, body { font-size: 13.3333333333333vw; /* 100px */ } .demo { width: 1rem; height: .1rem; background: red; } </style> </head> <body> <div id="app"> <div class="demo"> </div> </div> </body> </html> ~~~