移动端基础
移动端浏览器
国内移动端浏览器内核是根据webkit修改过来的，国内尚无自主研发的内核，主要对webkit内核进行兼容。
移动端调试方法
打开谷歌浏览器的开发者工具，点击下图按钮即可进入移动端开发
视口
视口（viewport）是浏览器显示页面内容的屏幕区域，视口可分为布局视口、视觉视口和理想视口。
布局视口
一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。元素看上去很小，一般默认可以通过手动缩放网页。
视觉视口
用户正在看到的网站区域，，这个区域的宽度等同于移动设备的浏览器窗口的宽度。可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。
理想视口
- 为了使网站在移动端有最理想的浏览和阅读宽度
- 需要手动添写meta视口标签通知浏览器操作
- meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致
meta视口标签
标准viewport设置
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
二倍图
- 物理像素：分辨率
- 物理像素比：一个px能显示的物理像素点的个数；
- 视网膜屏幕（Retina）：把更多的物理像素点压缩至一块屏幕里
- 多倍图：比原来尺寸像素大多倍的图片
- background-size: 宽度和高度（如果只写一个参数，会作为宽度等比例缩放）、百分比、cover（完全覆盖）、contain（将图片高度宽度等比例拓展到最大，当高度或宽度铺满盒子就不再拉伸）；
移动端开发选择
- 单独制作移动端页面（主流）
通常网址域名前面添加m（mobile）可以打开移动端
- 响应式页面兼容移动端
通过改变屏幕宽度来改变样式，以适应不同终端
移动端技术解决方案
移动端浏览器基本以webkit内核为主，考虑wenkit兼容性问题，可以放心使用H5标签和CSS3样式。
- CSS初始化：normalize.css
- CSS盒子模型
box-sizing: border-box CSS3盒子模型，不会撑大盒子（标准盒模型）
box-sizing:content-box 传统盒子模型（怪异盒模型）
移动端常见布局
移动端技术选型
- 单独制作移动端页面
- 流式布局（百分比布局）
- flex弹性布局
- less+rem+媒体查询布局
- 混合布局
- 响应式页面兼容移动端
- 媒体查询
- bootstrap
总结
上述知识是移动端web开发的入门知识，后续会有详细的教程介绍常见布局方法。