现在移动端几乎都要适配各种机型，在过去的经验中总是需要js判断屏幕大小，然后再在网页端调试的时候，屏幕改变了，还需要刷新一下才可以。
后来发现一个黑科技，就是只用样式，完全可以适配不同屏幕。
也可以看我的个人博客 关于sass rem写响应式的 问题，也有写到。
先说下以前的方式中比较简单的一种写法。
/* -----------------rem 适配------------------- */
// rem 原理：根据 html 的 fontSize 属性值为基准，其它所有的 rem 值，根据这个基准计算。
// 我们根据屏幕宽度用 js 动态修改了 html 的 fontSize 属性值，达到移动端适配的目的
let html = document.documentElement;
//getBoundingClientRect() 方法返回一个矩形对象，包含六个属性 :top,bottom,left,right,width,height
//我这里是基于宽 320px 的屏幕分成了 32 份，也就是 1rem = 10px
window.rem = html.getBoundingClientRect().width/32;
html.style.fontSize = window.rem +'px';
//现在，写代码的时候，12px就可以写成1.2rem
现在说下sass下rem响应式用法。
这种方式，在调试页面的时候，就不需要刷新了，自动跟着屏幕宽度变化。先贴下代码，一睹为快。
$defaultSize: 32px !default;
@function rem($px){
@return $px / $defaultSize * 1rem;
}
html{
font-size: 10vw;
font-family: "微软雅黑";
};
.hello{
width: rem(130px);
height: 100%;
background: #2e945a;
}
没错就是这么简单，惊不惊喜，震不震惊。反正本公子第一次get到这个的时候，内心还是非常喜悦的。
rem通俗的定义：如果你没有在根元素指定参照值，那浏览器默认就是 1rem 为 16px,如果你指定了根元素值假设为 10px，那 1rem 就为 10px。
再说下 vw 定义：vw 相对于视窗的宽度：视窗宽度就是100vw。
“视区”所指为浏览器内部的可视区域大小，即window.innerWidth大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。
1vw = 1 / 100 , 也就是1%，类似于width: 1%.
假设我有个 设计稿，宽度 是 320px。
那么 1vw 的大小 = 320px * 1 /100 = 3.2px;
假设我设置默认字体 $defaultSize 大小为 32px,
那么我此时页面的html字体大小换做视图单位 就可以设置为 32px/(3.2px/vm) = 10vw; 也就是在响应式下 html{ font-size: 10vm};
然后再说下 sass 中 rem 写法 ：
@function rem($px){
@return $px / $defaultSize * 1rem;
}
$px为需要转换的字号，例如，在320px设计图，侧边栏的宽度为 130px,那么 它的宽度为 width: rem(130px)。
$defaultSize 困惑了我好久，到底该怎么设置它的值。后来取值测试了好久，干脆以 html{font-size:10vw}为基准，根据上面的描述，也就是 10*1vw = 10 *3.2px = 32px，或者换一种说法，就是 设计图的宽度/10 (320px/10) 。
例如在上面所说的例子在 iphone6 下 375*667 的设计图下，$defaultSize 直接设置为 37.5px, 那么它的根 字体大小 为 37.5px/(3.75px/vm) = 10vw，设计图中的 侧边栏宽度为 152px, 所以侧边栏 width:rem(152px)，此时在调试模式展示,切换到iphone5模式下，此时的 侧边栏宽度为 130px,跟 上例一致。
这种写法，对于手机端还是很适用的，当然如果需要同时适配pad，ipad等设备，还需要根据设计图去修改，例如，可以通过媒体查询修改对应的宽高等。
不知道能不能看明白，之前刚接触这种写法的时候，也写过一篇相似的文章，当时写完，逻辑不通，自己都把自己讲糊涂了... 不过会用就好~~~
这是之前的网址：https://segmentfault.com/n/1330000007677257 这篇写de不好的...
有不理解之处，还望多多反馈~~多多探讨，这个我也是琢磨出来的...
网友评论