移动端前端页面实现学习笔记

1、设计稿

建议让UI设计师将设计稿设计成750*1334的大小，这个是iPhone6的的分辨率的两倍大小。

2、开始编写前端页面，设置好html的font-size

写页面之前先设置好html的font-size,例：

html{
    font-size:20px;//表示1rem=20px
}

可以使用响应式设置某种设备的html的font-size，使得可以匹配当前设备的大小，例如：

html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}

有一个可以匹配所有分辨率的做法，当设计稿是750*1334时，例：

(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 20 * (clientWidth / 375) + 'px';//表示在375*667的分辨率时，1rem=20px
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

3、添加头部meta

<meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0">

4、接下来就可以写样式了，当设计稿（此设计稿为750*1334）p元素的字体大小为28px,高度为80px，宽度为400px，样式如下：

p{
   font-size:0.7rem;
   height:2rem;
   width:100rem;
}

5、设计稿图片处理方式，当ui给的是一张40*40的图片，需要设置为span元素的背景图时，例：

span{
    width: 1rem;
    height: 1rem;
    display: inline-block;
    background: url("../images/back.png") 0 0 no-repeat;
    background-size:cover;/*需要设置背景图片的尺寸为覆盖的样式*/
}

这样就可以开始移动端页面的编写了。