移动端开发元素及字体尺寸适配基础知识

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

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

一、关于普通元素尺寸：

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

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

注：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即可，无论在什么设备下，都会等比例缩放；

当然，这是对于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
    }
}

扩展资料：
1、移动端高清、多屏适配方案
2、移动端适配方案(下)
3、使用Flexible实现手淘H5页面的终端适配

**本文版权归本人即笔名：该账户已被查封 所有，如需转载请注明出处。谢谢！ *