h5app

基于HTML5的跨平台移动应用开发

by @yuanzili

前端痛点

虽然H5的页面与PC的Web页面相比简单了不少，但让我们头痛的事情是要想尽办法让页面能适配众多不同的终端设备。看看下图你就会知道，这是多么痛苦的一件事情：

再来看看一个移动端页面要适配的终端设备数据：

#1 如何解决？rem

一、CSS单位使用 rem

在W3C规范中是这样描述它的:

font size of the root element.

简单的理解，rem 就是相对于根元素（body）的 font-size 来做计算。而我们的方案中使用 rem 单位，是能轻易的根据的 font-size 计算出元素的盒模型大小。而这个特色对我们来说是特别的有益处。

移动端 rem 布局的学习在线px转rem工具

#2 如何解决？viewport

如果看了上一页的响应式开发的视频那你对这个就不会有困惑，没时间看视频的话看下面的文章尝试理解一下？

简短的视频介绍什么是viewport 响应式相关联的媒体查询

flexible.js 移动端自适应方案

可伸缩式布局方案 GitHub 官方文档地址搜索 flexible

这个概念其实不是特别重要，不理解实际上也不会影响到开发，毕竟只需要copy一行代码而且也不需要根据不同页面使用不同配置，只是会对这东西来个疑问三连。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <!--  配置视口参数 -->
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>...</title>
    <!--  引入flexible 放在上面会优先加载？或许吧 偶然看到过类似的优化文章 -->
    <script src="flexible.js"></script>
</head>
<body>

</body>
</html>

下面是最基础的代码

尝试写两个页面感受下使用 rem 和使用 px 在响应模式下调试之间的区别？