移动端特点
移动端和PC端网页不同点
PC端网页和移动端网页的有什么不同？
Ø PC屏幕大，网页固定版心
Ø 手机屏幕小， 网页宽度多数为100%
谷歌模拟器
目标：使用谷歌模拟器调试移动端网页
image.png
分辨率
l 屏幕尺寸
Ø 指的是屏幕对角线的长度，一般用英寸来度量
image.png
目标：了解移动端主流设备分辨率
分辨率分类
Ø 物理分辨率是生产屏幕时就固定的，它是不可被改变的
Ø 逻辑分辨率是由软件（驱动）决定的
屏幕尺寸：指的是屏幕对角线的长度，单位一般为英寸；
物理分辨率/设备分辨率：
指的就是当前屏幕所拥有的物理像素点的个数！！！它是不可被软件(驱动)改变，出厂就固定了的；
逻辑分辨率：
指的就是设备宽度和高度，单位为像素，设计图会根据逻辑分辨率去设计页面，它是可以被软件/驱动所更改的
物理像素点：
显示图像最小单位
PPI：
单位英寸内所拥有的物理像素点的个数，像素密度，密度越大，屏幕越清晰
视口
目标：使用meta标签设置视口宽度，制作适配不同设备宽度的网页
l 手机屏幕尺寸都不同， 网页宽度为100%
l 网页的宽度和逻辑分辨率尺寸相同。
目标：使用meta标签设置视口宽度，制作适配不同设备宽度的网页
viewport：视口
1.理想视口标签：meta:vp
2.width=device-width ---- 设备的宽度和视口(页面)宽度相等
3.initial-scale=1.0 ---- 表示现在写多少像素，在页面之中就展示多少像素，不缩放
4.minimum-scale=1,maximum-scale=1,user-scalable=0 ---- 禁止用户缩放页面，防止页面布局被打乱
5.布局视口：移动端默认的页面宽度是980px，在没有视口标签的情况下
image.png
二倍图
目标：能够使用像素大厨软件测量二倍图中元素的尺寸
l 现阶段设计稿参考iPhone6/7/8，设备宽度375px产出设计稿。
l 二倍图设计稿尺寸：750px。
image.png
