手机页面

手机页面流程

1. 图片命名+iconfont下载命名
2. 创建站点
3. Common.css

*{}
body{}
a{}
input{}
ul,li{}
button{}
input[type="submit"]{}
img{width: 100%;}
header{}
footer{}

4. 布局用弹性盒子
5. Html>head

<!--mobile-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->

6. Css3兼容写法+兼容性高低
7. header，footer 固定定位，content留出上下空间
8. img大小宽度width100%，max-hight min-height
9. 手机页面点击为 a.active
10. 各个手机型号试验宽高（ 手机调试平台smartools/win10投影）

Note：

• swiper 引用
• 浮动内容不撑高度：最下面的的浮动元素底端margin-bottom
• 手机页面同一个页面
• 手机端字体单位：rem