移动端页面布局

关于移动端页面的总结，最近接触移动端页面，简单的介绍几种页面布局吧，以后继续补充。

1、移动端页面需要在头部添加

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

2、移动页面的布局方式

（1）横向百分比，纵向像素值

可以采用百分比（相对度量单位）进行盒模型横向属性（width、左右内边距、左右外边距）的制作，使用em（相对度量单位）实现文字的处理。但盒模型纵向上还是使用固定像素作为单位。

但是，这样做可能会导致变形，像素变化时，页面模块的宽高比例会变形，对于图片来说，也有可能导致变形，图片设置横向百分比，纵向会自动等比例缩放，如果父级元素高度固定，里面的img就会出现变形（压缩或者拉伸）的问题。

（2）响应式布局

我们可以使用一些流行起来的框架进行响应式布局，有BootStrap框架等；我们也可以使用css3属性，@media screen,通过媒体查询，对不同的手机像素各写一套代码，这种方式后期维护起来很麻烦。

（3）使用em或rem单位设置元素的宽高度

现在最流行的是使用rem单位进行开发，rem是依赖于根元素计算的单位。

这个必须添加一个样式

 

html(font-size:百分比;)

 

百分比的设定使用rem更方便，例如html { font-size:62.5% } 那么1rem就等于10px，百分比的设定给自己提供了方便。

这个会出现一个问题，假如说margin设置了1rem，屏幕变化时，margin的距离不会变化，空隙看起来会变大或变小，与周围元素的比例就会不对称，可能会跟设计图之间有出入。

（4）响应式的使用rem单位

使用一段js动态的设定html的font-size属性。

在项目css中(注意不要被公共的base、common之类的影响了，资源加载顺序也是蛮重要的)，先把html的fontSize设置为 100px（或者加上媒体查询代码）, 避免加载未完成时候样式错乱;

此时1rem=100px

css:

 

html {font-size:100px;}

 

js:

(function ($, window) {
        window.addEventListener('DOMContentLoaded', function () {
            var shuping = 'onorientationchange' in window ? 'orientationchange' : 'resize';
            var timer = null;

            //设置字体
            function setFontSize() {
                var w = document.documentElement.clientWidth || document.body.clientWidth;
                document.documentElement.style.fontSize = parseInt(100 * w / 设计稿的宽度) + 'px';
            }
            setFontSize();
            window.addEventListener(shuping, function () {
                clearTimeout(timer);
                timer = setTimeout(setFontSize, 300);
            }, false);
        }, false);
    })($, window);

参考：https://segmentfault.com/a/1190000003690140