移动端设置html的字体尺寸,移动端开发元素及字体尺寸适配基础知识

刚看了一篇真正教会你开发移动端页面的文章(二)，文章写的很清楚，现总结下他的核心思想及自己所查阅的一些资料：

假设设计稿是iPhone6(iPhone6设备像素为750px；设备像素比为2，即其适口尺寸为375px)上有200px的方块box：

一、关于普通元素尺寸：

(一)、box的大小无论在什么设备下大小都是固定的

body{        margin: 0;        padding: 0;

}    .box{        width: 200px;        height: 200px;        background: red;

}    

var scale = 1 / window.devicePixelRatio;    document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');    

(二)、box的大小随着屏幕的宽度大小变化而按比例变化(方法一)

body{        margin: 0;        padding: 0;

}    .box{        width: 2.6666667rem;

/* 200 (box设计的宽度) / 75(设备像素宽度的十分之一)= 2.6666667 */

height: 2.66666667rem;        background: red;

}    

var scale = 1 / window.devicePixelRatio;    document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');    document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';    

注：document.documentElement.clientWidth 为布局视口尺寸，iPhone5为320px，iPhone6为375px；

当然如果设计稿是iPhone5(设计稿的宽度为640px)，则1rem 为64px，那么box宽高应该为200/64=3.125rem

这种方法我们可以看到需要一些换算过程，也许你会觉得繁琐，其实不然，我们可以借助less来完成，例如：// 例如: .px2rem(height, 200);.px2rem(@name, @px){

@{name}: @px / 75 * 1rem;

}

因此，对于200px 的宽高，我们可以这样写：.px2rem(width, 200);.px2rem(height, 200);

在iPhone6下  HTML就会转换成.px2rem(width, 2.6666667 rem);.px2rem(height, 2.6666667 rem);

因此不需要我们自己亲自计算。

(三)、box的大小随着屏幕的宽度大小变化而按比例变化(方法二)

对于iPhone6的设计稿来说(设计稿总宽度尺寸为750px)，先设置html的font-size为100px；(也就是1rem)，这样总宽度为7.5rem，我们就以页面总宽7.5rem为基准，对于iPhone6的适口宽度(375px)来说，我们可以设置font-size为375/7.5=50px；对于iPhone5的适口宽度(320px)来说，我们可以设置font-size为320/7.5=42.6666667px；也就是document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';

因此对于设计稿中的200px宽高，我们直接使用200px/100px=2 也就是2rem即可，无论在什么设备下，都会等比例缩放；

body{        margin: 0;        padding: 0;

}    .box{        width: 2rem;        height: 2rem;        background: red;

}    

document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';    

当然，这是对于iPhone6的设计稿来说的，如果对于iPhone5的设计稿(总宽为640px)，我们可以同样采用先设置html的font-size为100px，这样总宽度为6.4rem，200px的box则为2rem，    对于iPhone5的适口宽度来说，我们可以设置font-size为320px/6.4=50px(200px的box还是为2rem即100px)；

对于iPhone6的适口宽度来说，我们可以设置font-size为375/6.4=58.59375px(200px的box还是为2rem即117.1875px)；

因此可将上面的代码中的document.documentElement.style.fontSize部分改为

document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px'; 即可；

相关文章： 动态rem简单示例

相关插件：gulp-postcss、postcss-pxtorem 、gulp-posthtml、posthtml-postcss、postcss-pxtorem

二、关于字体尺寸

对于字体，不建议使用rem单位而是采用媒体查询；

例如：@media screen and (max-width: 321px) {    body {        font-size:16px

}

}

@media screen and (min-width: 321px) and (max-width:400px) {    body {        font-size:17px

}

}

@media screen and (min-width: 400px) {    body {        font-size:19px

}

}

作者：该帐号已被查封

链接：https://www.jianshu.com/p/dffa036d7595