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> ~~~