2017IFE-移动Web页面布局实践

前言

2017-百度前端技术学院编码任务：移动Web页面布局实践

任务目的

• 进行移动开发时的HTML及CSS实践
• 掌握移动Web开发在页面架构和布局的方法及差异性
• 掌握移动Web开发页面调试的方法

任务描述

• 实现与 设计图（点击查看） 一致的移动端Web页面

DEMO

项目地址

实现

移动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端要，但是有自己的特点

• 调试
  每个浏览器都有自己移动端调试方式，具体可以看看这里

参考链接

• 再聊移动端页面的适配
• 移动前端不得不了解的HTML5 head 头标签（2016最新版）
• 移动WEB开发入门
• 移动端 Web 页面调试指南