手机适配rem和viewport #mobile #adapter
1.设置viewport
~~~css
.wrapper {
width: 750px;
margin: auto;
background: #F2F2F2;
overflow: hidden;
}
p{
font-size:28px; //设计稿字体大小
}
~~~
~~~javascript
~function() {
var winWidths = (document.body) && (document.body.clientWidth) ? document.body.clientWidth : window.innerWidth;
var defaultWidth = 750; //设计稿尺寸
var appScale = winWidths >= defaultWidth ? 1 : (winWidths / defaultWidth);
viewport.content = 'width=device-width,initial-scale=' + appScale + ', minimum-scale=' + appScale + ', maximum-scale=' + appScale; //缩放
}();
~~~
2.rem缩放
~~~css
.wrapper {
width: 7.50rem;
margin: auto;
background: #F2F2F2;
overflow: hidden;
}
//背景图片rem
.header .back-icon {
width: .90rem;
height: .90rem;
background: url(../img/back@2x.png) center no-repeat;
-webkit-background-size: .25rem .43rem; //需要设置背景图片大小,不设置默认撑满整个空间
background-size: .25rem .43rem;
}
p{
font-size:.28rem; //设计稿字体大小
}
~~~
//图片rem
~~~html
<img src="img/visa@2x.png" alt="visa" style="width: 1.12rem;height: .35rem;"> 不能通过属性width='1.12rem',不能识别rem单位,只能px或%或不填
~~~
~~~javascript
~function() {
var winWidths = (document.body) && (document.body.clientWidth) ? document.body.clientWidth : window.innerWidth;
var defaultWidth = 750;
var appScale = winWidths >= defaultWidth ? 1 : (winWidths / defaultWidth);
document.getElementsByTagName('html')[0].setAttribute('style', 'font-size:' + appScale * 100 + 'px !important'); //有!important 不能通过document.getElementsByTagName('html')[0].style 方式设置
}();
~~~
pc chrome 中最小字体默认12px,需要在设置里面修改。
字体最好不可以用rem,误差太大了,且不能满足任何屏幕下字体大小相同
参考:https://juejin.im/entry/56ce78eac24aa800545af276