网易的适配:
通过js去设置html的font-size,假设你的设计稿是640px,为了计算方便去用一个100 px做参考,看一下的他的js写法
这个6.4怎么来的,用640/100=6.4rem;
也就相当于1rem=100 px;他的设计稿是640px;也就是说当他的屏幕宽度是640px时,他的font-size:100 px;然后你如果现在要设置一个宽度为150 px的div块,那么他的宽度用rem设置就是150/100=1.5rem;但是这个的前提是
<meta name="viewport" content="initial-scale=0.3,maximum-scale=1,minimum-scale=1">
如果设置字体大小,用媒体查询分别设置。
淘宝的适配:
也通过js去设置html的font-size,
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';淘宝是通过scale去放大缩小屏幕,
var scale = 1 / devicePixelRatio; document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
我觉得淘宝的意思是,假如现在屏幕是750px;然后我把屏幕的字体弄成750/10=75px;也就是说我的1rem=75px;所以我计算的时候,比如我要计算150px的rem值,所以150/75=2;在手机上我的150px就是2rem;但是这样算的时候比较麻烦,如果你的项目中用到less/scss时,就比较简单了,在scss中写一个函数,当计算rem你传一个值,自动编译的时候,他就会自动生成对应的rem,
@baseFontSize: 75;//基于视觉稿横屏尺寸/100得出的基准font-size .px2rem(@name, @px){ @{name}: @px / @baseFontSize * 1rem; }
//使用示例:
.container { .px2rem(height, 240); }
//less翻译结果: .container { height: 3.2rem; }
说一下网易和淘宝适配的区别:
1.都动态设置了html的font-size,
2.容器的font-size都没用rem设置,
3.都能适应各种设备
4.淘宝要修改一个viewport
5.淘宝基于750px;网易基于640px;
6.网易的做法,很好计算,淘宝的做法,计算很麻烦。但是用css预处理器就比较简单了。
以上都是自己的理解,如有错误,请提出。
参考原文:http://caibaojian.com/mobile-responsive-example.html