移动端分辨率

移动端设计时参考的分辨率一般为：320* 568, 375* 667, 414* 736

大神总结

em和rem的区别

PX是像素单位，在同一个浏览器分辨率下一经设定就是固定的值。
em和rem区别于PX 它们都是可扩展单位区别在于对应参照物字体大小不同解析成PX时的大小不一样。
当使用 rem 单位，他们转化为像素大小取决于页根元素（html）的字体大小，根元素字体大小乘以 rem 值。

    
html{
font-size: 14px;
}
div{
  width:10rem;
}
// div的width解析后 width:140px;

当使用em单位时，像素值将是em值乘以当前元素的父级元素父级的字体大小，父元素字体大小乘以 em 值。

    
        
            这是em
        
    

        html{
            font-size: 14px;
        }
        .div1{
            font-size: 16px;
        }
        .div2{
           width: 10em;
        }
// div2的width解析后 width:160px;

移动端适配方案之[postcss-px-to-viewport]

postcss-px-to-viewport，将px单位自动转换成viewport单位

npm install postcss-px-to-viewport --save-dev

引入vue项目，再postcss.config.js引入

module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-px-to-viewport': {
       viewportWidth: 750,   // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
      viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
      unitPrecision: 3,     // 指定`px`转换为视窗单位值的小数位数
      viewportUnit: "vw",   //指定需要转换成的视窗单位，建议使用vw
      selectorBlackList: ['.ignore'],// 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
      minPixelValue: 1,     // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      mediaQuery: false     // 允许在媒体查询中转换`px`
    }
  }
}

布局方法

选择一个分辨率作为参考, 其他分辨率参考该分辨率做适配

// 屏幕适配（ window.screen.width / 移动端设计稿宽 * 100）也即是 (window.screen.width / 750 * 100)  ——*100 为了方便计算。即 font-size 值是手机 deviceWidth 与设计稿比值的 100 倍
document.getElementsByTagName('html')[0].style.fontSize = window.screen.width / 7.5 + 'px';
// 或者
// rem计算方式，适配rem.
(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 = 100 * (clientWidth / 375) + 'px';
            doc.body.style.display = 'block';
        };

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

通过CSS 的 @media 响应式 的根据不同的分辨率设置不同的样式
注意：
1.宽度需要使用百分比
2.图片处理给图片指定的最大宽度为百分比。如果图片大了，就同比缩小，如果图片小了，就原尺寸输出。

/** 指定iPad **/
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  #head { … }
  #content { … }
  #footer { … }
}
/**指定 iPhone **/
@media only screen and (min-width: 320px) and (max-width: 767px) {
  #head { … }
  #content { … }
  #footer { … }
}
/** 最大宽度**/
@media screen and (max-width: 980px) {
  #head { … }
  #content { … }
  #footer { … }
}

通过自适应100%、box-flex、rem(相对于根目录的字体大小来设置)

meta 标签

meta 标签的 viewport 标记设置当前显示给用户内容的窗口拖动和缩放

常用的属性有

width 和height 分别指定视区的逻辑宽度和高度, width可以是像素或者device-width(当前屏幕宽度)
initial-scale 设置页面的初始缩放比例, 一般不缩放设置为1.0
user-scalable 用户是否可以缩放视区 yes/no

viewport 除此之外还有以下属性

device-dpi 设备默认的像素密度
high-dpi 高像素密度
medium-dpi 中等的像素密度
low-dpi 低像素密度

设置根目录字体大小为当前屏幕宽度的1/3倍, 可根据需求自定义
这有一个好处就是, 可以固定所有标签的width或者height等数量属性为固定的多少像素(PX), 浏览器会根据屏幕宽度按1/3的比例动态改变, 类似于使用百分比布局(width:100%),但是个人认为使用px为单位更方便布局

    document.getElementsByTagName("html")[0].style.fontSize = document.documentElement.clientWidth/3 + "px";

此外移动端布局还涉及到

Android和IOS的兼容性问题(背景图片定位,浏览器兼容)
移动端UI框架(jquery weui)
布局(flex,div)

// 标签浏览器兼容代码
@charset "utf-8";
body, button, input, select, textarea {
    font: 12px/1.125 Arial, Helvetica, sans-serif
}

blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul {
    margin: 0;
    padding: 0
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

li {
    list-style: none
}

fieldset, img {
    border: 0
}

q:after, q:before {
    content: ''
}

input, textarea {
    outline-style: none
}

input[type=text], input[type=password], textarea {
    outline-style: none;
    -webkit-appearance: none
}

textarea {
    resize: none
}

address, caption, cite, code, dfn, em, i, th, var {
    font-style: normal;
    font-weight: 400
}

legend {
    color: #000
}

abbr, acronym {
    border: 0;
    font-variant: normal
}

a, u {
    text-decoration: none
}

a:hover {
    text-decoration: underline
}

以下参考大神的做法,动态修改body 的font-size

开发原则：文字流式，控件弹性，图片等比缩放。

设计稿竖直放时的横向分辨率为640px，为了计算方便，取一个100px的font-size为参照，那么body元素的宽度就可以设置为width: 6.4rem，于是html的font-size=deviceWidth / 6.4。这个deviceWidth就是viewport设置中的那个deviceWidth。
这个deviceWidth通过document.documentElement.clientWidth就能取到了，所以当页面的dom ready后，做的第一件事情就是：

document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';

这个6.4怎么来的，当然是根据设计稿的横向分辨率/100得来的。
如果设计稿基于iphone6，横向分辨率为750，body的width为750 / 100 = 7.5rem
如果设计稿基于iphone4/5，横向分辨率为640，body的width为640 / 100 = 6.4rem
当deviceWidth大于640时，则物理分辨率大于1280（这就看设备的devicePixelRatio这个值了），应该去访问pc网站了。

var deviceWidth = document.documentElement.clientWidth;
if(deviceWidth > 640) deviceWidth = 640;
document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';

//使用了less和sass这样的css处理器
//定义一个变量和一个mixin@baseFontSize: 75;//基于视觉稿横屏尺寸/100得出的基准font-size
.px2rem(@name, @px){
    @{name}: @px / @baseFontSize * 1rem;
}
//使用示例：
.container {
    .px2rem(height, 240);
}
//less翻译结果：
.container {
    height: 3.2rem;
}

如何与设计协作

第一步，视觉设计阶段，设计师按宽度750px（iphone 6）做设计稿，除图片外所有设计元素用矢量路径来做。设计定稿后在750px的设计稿上做标注，输出标注图。同时等比放大1.5倍生成宽度1125px的设计稿，在1125px的稿子里切图。

第二步，输出两个交付物给开发工程师：一个是程序用到的@3x切图资源，另一个是宽度750px的设计标注图。

第三步，开发工程师拿到750px标注图和@3x切图资源，完成iPhone 6（375pt）的界面开发。此阶段不能用固定宽度的方式开发界面，得用自动布局（auto layout），方便后续适配到其它尺寸。

第四步，适配调试阶段，基于iPhone 6的界面效果，分别向上向下调试iPhone 6 plus（414pt）和iPhone 5S及以下（320pt）的界面效果。由此完成大中小三屏适配。

第一篇,记录自己踩过的坑!

页面规范

移动端适配 em和rem的区别