适应不同移动端web页面解决方案

同一个html在不同的移动设备上显示效果也有不同.

在刚开始开发移动端的时候,经常遇到不同设备页面错位的问题.网上也有好多种解决方案.

这里介绍其中一种解决方案.

说方案之前首先得解释一下单位(px,%,em,rem,vw)

px像素:相对长度单位。像素px是相对于显示器屏幕分辨率而言的.

比如说分辨率是1366*768,可以想象成是把电脑屏幕分成1366列,768行的表格.其中一个小方块就是1px

所以用px作为单位,在pad上就会出现字超级大的情况

em:em 指字体高，任意浏览器的默认字体高都是16px。
所以未经调整的浏览器都符合: 1em=16px,它会继承父级元素的字体大小，
因此并不是一个固定的值
可能会在content这个div里把字体大小设为1.2em, 也就是12px。
然后你又把选择器p的字体大小也设为1.2em，但如果p属于content的子级的话，
p的字体大小就不是12px，而是1.2em= 1.2 * 12px=14.4px。
这是因为content的字体大小被设为1.2em，这个em值继承其父级元素body的大小，
也就是16px * 62.5% * 1.2=12px, 而p作为其子级，em则继承content的字体高，
也就是12px。所以p的1.2em就不再是12px，而是14.4px。

rem:rem 是相对于 html 元素的 font-size 的一个单位。
如果 html 上定义了 font-size: 20px;，
则无论在任何地方都是 1rem = 20px 这个大小不会受到父元素的影响。

vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。
vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。

vmin：vw和vh中较小的那个。
vmax：vw和vh中较大的那个。
vw, vh, vmin, vmax：
IE9+局部支持，chrome/firefox/safari/opera支持，ios safari 8+支持，
android browser4.4+支持，chrome for android39支持

 

 

单位说明完毕,下面是解决思路

我们使用rem作为单位,不同设备的宽度不一致,我们可以根据宽度来改变html中的font-size的大小.

这样每个元素的大小就不是固定的了,都会相对于屏幕去改变.

首先在每个页面里加入这段代码

(function (doc, win) {
    var docEl = doc.documentElement;
    var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
    var recalc = function () {
        var clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        if (clientWidth >= 750) {
            docEl.style.fontSize = '100px';
        } else {
            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
        }
    };

    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

这里的代码是把fontSize按照一定比例去改变,

fontsize改变了,rem的大小也就跟着改变了

不同屏幕页面也会等比例改变