2017IFE-移动Web页面布局实践
2017-08-31 本文已影响143人
朋友喜欢叫我春哥
前言
2017-百度前端技术学院编码任务：移动Web页面布局实践
任务目的
- 进行移动开发时的HTML及CSS实践
- 掌握移动Web开发在页面架构和布局的方法及差异性
- 掌握移动Web开发页面调试的方法
任务描述
- 实现与 设计图（点击查看） 一致的移动端Web页面
实现
移动Web开发与PC端页面主要的区别：
- 视觉
- px （像素，物理屏幕最小组成单位）
- PPI （每英寸像素比）
- dips（设备无关像素，前端这里就是CSS的像素）
- dpr （设备像素比，物理像素/dips）
视觉这里主要和移动端适配有关系，之前采用淘宝《使用Flexible实现手淘H5页面的终端适配》文章里的技术，本质就是通过JS模拟vw和vh来实现适配。
但是最近看大漠老师的文章《再聊移动端页面的适配》里面提出目前可以直接使用vw和vh单位进行适配。
主要思路就是使用vw来实现页面的适配，并且通过PostCSS的插件postcss-px-to-viewport把px转换成vw。这样的好处是，我们在撸码的时候，不需要进行任何的计算，你只需要根据设计图写px。
-
交互
移动端的交互方式其实比PC端要，但是有自己的特点 -
调试
每个浏览器都有自己移动端调试方式，具体可以看看这里
