text 手机适配rem和viewport #mobile #adapter

Posted 2021-05-02

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/[e-mail]) center no-repeat;
    -webkit-background-size: .25rem .43rem; //需要设置背景图片大小，不设置默认撑满整个空间
    background-size: .25rem .43rem;
}
p{
	font-size:.28rem; //设计稿字体大小
}
~~~
//图片rem
~~~html
<img src="img/[e-mail]" 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