【 js 片段 】移动端适配简易步骤

手机端全部适配简易步骤，不确保没有bug。

1、HTML 的 head 部分中加入如下代码：

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

其中 width：viewport 的宽度，可以指定为一个像素值，如：640，或者为特殊的值，如：device-width （设备的宽度）。

      initial-scale：初始缩放比例，即当浏览器第一次加载页面时的缩放比例。值为 1.0 即原始尺寸。

　　maximum-scale：允许浏览者缩放到的最大比例，一般设为1.0，即原始尺寸。

　　minimum-scale：允许浏览者缩放到的最小比例，一般设为1.0，即原始尺寸。

　　user-scalable：浏览者是否可以手动缩放，yes 或 no 。

 

2、HTML 中引入 一段自动适配所有窗口的 js 。

　　HTML 代码如下 （ 假设你的 js 在 scripts 文件夹下，命名为 demo.js )：

<script src="scripts/demo.js"></script>

适配的 js 代码如下 （将如下代码复制粘贴到你的 demo.js 中）：

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

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

 

3、CSS 中 在最开始设置 html 的 font - size ：20px；（这个 size 标准由你定）代码如下：

html {
    font-size: 20px;
}

然后 假设你部门的设计师给你的 页面 标准宽度为 640px，则页面中所有的 宽高 全部除以 2 ，Chrome 浏览器 模拟手机页面 设置手机型号为 IPhone 4 。这也就是为什么要将所有的宽高除以 2 的原因：IPhone 4 标准 宽 是320 px。 然后 正常的用 px 为单位 写你的 css ，你所需要做的就是你写的页面，要在 IPhone 4 完全正确显示。如果你说，那设计那边给的不是 640 标准怎么办？你只要让你的页面按照设计图在 iphone 4 上正确显示，就木问题。

 

4、页面 css 全部写完之后，将所有的 px 转换为以 rem 为单位的数字。例如 我设置 body 的 width ：320px； 则根据 我在第三步设置的 font - size 值，转换为 rem ，则是

width ：16 rem； 【320 / 20 (你设置的标准 font - size) = 16】。

 

如果你说一个页面的 css 有几百行，写完再去改 太麻烦了，那可以用 px 转换成 rem 的插件。我这里有一款推荐 ：cssrem（下载使用网址https://github.com/flashlizi/cssrem）

 

5、大功告成，随意切换机型，尽情得瑟吧~

 

 

不评论 关注一下我？