H5编写移动端注意事项

在编写移动端网页时需要注意如下几点：

1. 首先，在创建好的 .html 页面中需要设置 Viewport

2. 单位的使用
   首先我们需要明白一些单位作用：px一般都是固定的大小、 em是参考其父级元素的font-size所设置的值（因此，首行缩进经常会用到：text-indent:2em;）、 rem则是参考的html下的font-size的值，是相对的
   在移动端开发中，为了能够自适应，不要出现 px 单位（除非确定的元素）
   使用：
   1）百分比
   2）rem
   3）屏幕宽度不需要给出，使其自适应即可
   4）文字大小使用 rem
   注意：页面汇总 rem 参考的是html中的font-size的值，为了方便计算，将 html 中的字体大小设置为：font-size:50px; 这样之后的测量中，将px单位直接 *0.01 即可。
3. 移动端开发中无需考虑浏览器的兼容性问题，因此H5、C3、flex布局等均可使用
4. 补充：为了能够更好的适应多种屏幕，可以加上媒体查询，改变不同屏幕下的html中的font-size的大小

@media screen and (max-width: 374px) {
    html{
        /*让rem做一个基数*/
        font-size: 40px;
    }
}
@media screen and (min-width: 374px) and (max-width: 768px) {
    html{
        /*让rem做一个基数*/
        font-size:50px;
    }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
    html{
        /*让rem做一个基数*/
        font-size:95px;
    }
}
@media screen and (min-width: 1024px) {
    html{
        /*让rem做一个基数*/
        font-size:130px;
    }
}

flex伸缩布局使用选择：
1.传统的pc端网站，考虑兼容性，尽量不用弹性布局和css3等效果
2.假如不兼容ie低版本浏览器，可以使用
3.写响应式网站或者手机端的（移动端）网页的时候可以随便使用

如下，是我在学习移动端开发之后，写的简单demo，大家可以参考
https://zlqgithub.github.io/移动端/

页面配置上需要注意

• 视图 （viewport）

• 点击响应延迟3毫秒
  原因：为了判断用户是否在双击，快速去响应用户的双击事件，因此引入了 fastclick.js
  下载使用：https://www.bootcdn.cn/fastclick/ （CDN）
                    https://github.com/ftlabs/fastclick （GitHub上下载）

  配置和使用（基于vue项目来实现）