在编写移动端网页时需要注意如下几点：
首先，在创建好的 .html 页面中需要设置 Viewport <!-- viewport 是用户网页的可视区域（视区） 手机浏览器把页面放在一个虚拟的“窗口”中（viewport），该窗口通常比屏幕宽（其默认是980px）， 这样就不需要把网页挤到很小的窗口中去（否则会破坏没有针对手机浏览器优化网页的布局）， 用户可以通过放大、缩放来查看网页的内容。 --> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 单位的使用 首先我们需要明白一些单位作用：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 即可。移动端开发中无需考虑浏览器的兼容性问题，因此H5、C3、flex布局等均可使用补充：为了能够更好的适应多种屏幕，可以加上媒体查询，改变不同屏幕下的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项目来实现）
<script src='/static/js/fastclick.js'></script> <script> if ('addEventListener' in document) { document.addEventListener('DOMContentLoaded', function() { FastClick.attach(document.body); }, false); } </script>