手机响应式wap网页最佳方案

wap页面怎么作?

这个问题困扰了我很久，在PC上咱们惯用的px单位在手机上根本不适用，即便咱们写了<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"/>防止网页自动缩放也无济于事，由于各手机分辨率大小不一样。

用百分比布局。宽度自适应作到了可是高度呢，高度也用百分比吗？难道把元素的高度写死吗。这种作法就是jquery mobile页面的作法了，大屏手机显示效果很差看。

用Bootstrap作栅格化。这种作法有个很大的弊病，小屏隐藏多余的元素来展现页面，而实际上那些元素你都加载进来了，浪费资源。

前面两种作法也很难完美还原设计图的尺寸。那有什么好的办法呢？

灵活的em与灵活可控的rem

em是相对单位，相对于父级的字号。这里的父级其实指的是祖先级，一直往上哪里定义了字号就相对它，直到根节点html。

假设它是相对于根节点的，根节点html的字号通常是16px，那么1em=16px、12px=0.75em，假如在到根节点以前的节点已经有设置过字号了，好比说它设置了2em，那么1em=2em=32px、0.75em=24px。

这时候咱们就发现坑爹了，假如咱们是元素嵌套的，父级上设置了字号，这个单位换算的规则都变了！那怎么办？

rem也是相对单位，可是它是相对根节点的。这个就好办了，永远相对同一个字号，规则就同样了。假设根节点设置了font-size=16px 那么1em=16px、12px=0.75em；假设根节点设置了font-size=32px 那么1em=32px、0.75em=24px。无论在哪一个地方单位换算的规则都是不会变的。

如何跟设计图对接

设计图上的单位是px，咱们如何转换成em呢，难道用计算器吗？
这里有个单位换算小工具，它是换算em的，可是你也能够用它来换算rem，只要把基础像素设置成根节点字号就好了。可是基础像素应该设置成多少呢？

我看了小米的wap页面，他们作了一个媒体查询表，根据不一样分辨率设置根目录的字号。这样就能够实现自适应了！它是直接写在页面上，模拟手机看源码吧view-source:http://m.mi.com/v2.html。下面是格式化后的部分代码：

@media only screen and (max-width: 300px) {
  html {
    font-size: 8.33333px
  }

  .viewport {
    max-width: 300px
  }
}
@media only screen and (max-width: 310px) and (min-width: 300px) {
  html {
    font-size: 8.33333px
  }

  .viewport {
    max-width: 310px
  }
}
@media only screen and (max-width: 320px) and (min-width: 310px) {
  html {
    font-size: 8.61111px
  }

  .viewport {
    max-width: 320px
  }
}
@media only screen and (max-width: 350px) and (min-width: 320px) {
  html {
    font-size: 8.88889px
  }

  .viewport {
    max-width: 350px
  }
}
@media only screen and (max-width: 360px) and (min-width: 350px) {
  html {
    font-size: 9.72222px
  }

  .viewport {
    max-width: 360px
  }
}
……

棒棒哒有木有！这时候咱们根据这个表来设置基础像素，好比设计图的宽度是640px，咱们看它这个表，能够看到html对应的font-size值是17.77778px，那么基础像素就是这个值，而后咱们根据设计图量出来的px长度转换成em、rem单位了！

有没有更智能的方式？

为何每次都要经过小工具去换算单位呢，有没有办法让单位自动换算的？
直接用css固然是行不通的，虽然它有calc()这个属性，可是兼容性不强。咱们配合CSS预编译来作呢，less、sass、stylus，不是可让css有运算能力吗。
以后我发现了百度EFE团队开发的基于less的est框架里面就包含了这功能。

推荐下本身的

第一次用了est，就发现了bug，@margin-rem()方法用不了，而后我打开它的less源文件想去修改一下的，发现它的实现方式一点都不优雅！主要由于less语言能力太弱了。改好以后又遇到几个其它方法的坑，遂打算本身写一个，反正也不难。

我最早尝试使用sass来写的。它是基于ruby环境的，这个我就不计较了，反正安装方式跟node同样简单，安装子。后来发现它居然不支持正则，还能不能好好玩耍了？

最后就用了先进的stylus。它是基于node环境，适合咱们前端的开发环境，不错。

而后我就模仿了est开发了本身的qst，自我感受良好，已经在两个项目中实践了。

相关连接

• 小米wap网站：http://m.mi.com
• 单位换算小工具：http://pxtoem.com/
• qst样式工具库：https://github.com/xjchenhao/qst