一、移动端现状
国产移动浏览器基本以 webkit 内核为主，因此我们就考虑webkit兼容性问题。手机屏幕分辨率 五花八门没有统一的分辨率。
二、可以通过谷歌浏览器来调试兼容不同的屏幕分辨率
步骤：
1.鼠标右键 检查 或 F12 控制器界面方向；
2.选择 手机模式
3.选择 手机类型及尺寸；调节适当的显示比例；
4.点右键 查看 页面元素；
三、viewport（视口）
作用：可以把不同分辨率的图片在不同屏幕分辨率的手机上显示同样的大小，且分辨率高的会更清晰。
语法
默认：HTML980px；
理想：手机屏幕多大，HTML就设置是多大；
meta标签设置：
通过在vscode中打"html5"直接就写出来了<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum- scale=1.0, minimum-scale=1.0">
width=device-width：改变HTML默认的980px 为 屏幕的宽度；
user-scalable: 是否允许用户缩放屏幕 值：no(0不允许) yes(1允许)；
initial-scale：初始化缩放比例；1.0：不缩放；
maximum-scale：用户对页面的最大缩放比例；值：比例
minimum-scale：用户对页面的最小缩放比例；值：比例
四、物理像素点
定义：
指计算机显示设备中的最小单位，即一个像素点的大小。每一个像素点可以理解为就是屏幕上的一个发光 点。每个点可以发一个颜色，就是我们看到的画面。
早期的屏幕，物理像素点都比较大，比如玩游戏的超级玛丽的画面的颗粒感很强：随着技术的进步，物理像 素点会被做的越来越小；会被做小；
五、屏幕分辨率
定义：
屏幕分辨率：物理像素点的个数来衡量，表示屏幕水平和垂直方向的物理像素点的个数，物理像素点有多少 个。
六、图片分辨率
定义：就是一张图片占多少物理像素点。
问题：一张图片在不同分辨率的屏幕上大小是不同的。
解决：
规定好长度，让在分辨率高的设备里的图片的分辨率=在低分辨率设备里的图片的分辨率*（高分辨率设备的fbl/低分辨率设备的分辨率）^2 就能解决问题。
移动端：
都是200长度到底如何设置呢？
设置CSS 宽高200px后，会自动保证每个屏幕显示元素大小一样，
会自动算出不同屏幕下，背后需要提供物理像素点需要多少个。
针对上面，每个手机会自动算出要给图片准备200个物理像素点、400个物理像素点；
七、二倍图由来
开始：设置CSS像素200px宽，320分辨率（200）,640分辨率（400）；这样才显示一样；
像针对640分辨率手机屏（iPhone4），要求设计给400400图，对应我们CSS设置200px,有二倍的关系；
*命名：
xxxxx@2x.png：二倍图
xxxxx@3x.png：三倍图
八、移动端常见布局
8.1单独制作移动端页面
（1）流式布局 (百分比布局)
（2）flflex弹性布局 (强列推荐)
（3）less+rem+媒体查询布局
（4）混合布局
8.2响应式页面兼容移动端
8.3方案
单独制作：淘宝、京东、苏宁手机端都是单独制作的，流式、flflex、rem布局、专门针对各种手机屏幕进行开
发。
响应式：三星电子官网。www.samsung.com/cn/ ；特点：可兼容PC 移动端，一个页面多个端适配显示；制
作起来要考虑到兼容性的样式。
选择：公司业务需求；
8.4样式初始化-了解
国产移动浏览器基本以 webkit 内核为主，因此我们就考虑webkit兼容性问题。
normalize.css：大家以前自己写的base.css
http://necolas.github.io/normalize.css/
保护了有价值的默认值；
修复了浏览器的bug
**
若有收获，就点个赞吧
0 人点赞
