设计规范（尺寸）
相关概念
屏幕
屏幕大小
屏幕的大小指的是屏幕对角线的长度，单位是英寸（inch）,常见的尺寸有：3.5、4.7、5.0、5.5、6.0寸等
注意：一英寸 = 2.54厘米
屏幕分辨率
分辨率是指屏幕在横向、纵向上所拥有的物理像素点的最大数量，一般使用n*m表示
例如：iphone6的屏幕分辨率为 750 * 1334
注意：
1、屏幕分辨率是一个固定值，这是无法改变的
2、屏幕分辨率和现实分辨率是两个概念，在电脑中可以设置的叫：显示分辨率
3、显示分辨率是当前屏幕所用到的像素点数量，也就是说：屏幕分辨率>=显示分辨率
常见手机分辨率：
屏幕密度
又叫“屏幕像素密度”，是指屏幕上每英寸里包含的物理像素点个数，单位是：ppi（pixels per inch），还有另一个单位：dpi（dots per inch），两个单位的计算方式都一样，只是使用的场景不同，ppi主要用来衡量屏幕，dpi主要用来衡量打印机等。
屏幕分辨率：X * Y
计算公式：
像素
物理像素
又叫设备像素，是一个长度单位，单位是px，一个物理像素就是屏幕上实际存在的一个物理成像点，就是屏幕中一个微小的物理元器件，是屏幕能显示的最小粒度，在屏幕生产后就无法修改
例如：iPhone6的横向的物理像素点为750，纵向的物理像素点为1334，也表示为750*1334
css像素
又叫逻辑像素，是一个抽象的长度单位，单位也是px，是由Web开发者创造的，用来精准的度量Web页面上的内容大小，在编写css、js、less、scss的时候，使用的都是css像素
设备独立像素
简称 DIP 或 DP（device-independent pixel），又称：屏幕密度无关像素
设备独立像素与物理像素的关系：
普通屏幕下 1 个设备独立像素对应 1 个物理像素
高清屏幕下 1 个设备独立像素对应 N 个物理像素
设备独立像素与css像素关系：
在无缩放的情况下（标准情况）：1css像素 = 1设备独立像素
图片高清显示
位图像素
位图：
又称点阵图像或栅格图像，是由n个像素点组成的，放大后会失真，常见的格式有：png、jpeg、jpg、gif，一般使用PhotoShop等软件进行编辑
矢量图：
又称为面相对象图像或绘图图像，在数学上定义为一系列由线连接的点，放大不会失真，常见的格式有：svg，一般使用Adobe Illustrator（AI）、Sketch等软件进行编辑
位图像素也是一个长度单位，位图像素可以理解为位图中的一个小格子，是位图的最小单元
视口相关
布局视口
布局视口叫做LayOut viewport
移动端获取布局视口方式：document.documentElement.clintwidth
视觉视口
视觉视口又叫做visual viewport
视觉视口就是用户的可见区域，它的绝对宽度永远和设备屏幕一样宽，但这个宽度里所包含的css像素值是变化的
例如：一般手机会把980个css像素放入视觉视口中，而ipad Pro会把1024个css像素放入世界视口中
移动端获取视觉视口方式：window.innerWidth，但是在一些特定的时候无法正确获取，同时一般也不会通过代码查看视觉视口
理想视口标准
和屏幕（设备独立像素）等宽的布局视口，称之为理想视口，可以说理想视口是一种标准，让布局视口宽度与屏幕等宽（设备独立像素），靠标签实现
特点：
1、布局视口和屏幕等宽，以iPhone6为例，符合理想视口标准之后，设备独立像素：375px，布局视口宽度：375px
2、用户不需要缩放，直接滚动就能看到网站的全部内容
3、要为移动设备单独设计一个移动端的网站
设置理想视口的具体方法：
width : 布局视口的宽度
device-width ：设备独立像素
<meta name="viewport" content="width=device-width" />
视口总结
不写meta标签（不符合理想视口标准的状态下）
1、描述屏幕
物理像素：750px
设备独立像素：375px
css像素：980px
2、优点
元素在尺寸不同的设备中显示的效果几乎一致，因为都是通过布局容器等比例缩放的，例如200px宽的盒子，所占的比例都是200/980
3、缺点
元素太小了，在小屏幕中不清楚，用户体验极差
写meta标签（符合理想视口标准的状态下）
1、描述屏幕
物理像素：750px
设备独立像素：375px
css像素：375px
2、优点：
页面清晰展现，内容不会小到模糊，难以观察，用户体验大大提高
会拥有更加清晰的像素关系：布局视口 = 视觉视口 = 物理像素 = 375px
会拥有更加清晰的dpr，即dpr = 物理像素/设备独立像素 = 物理像素/css像素
例如：dpr = 2 的设备，11 css像素 = 11 独立设备像素 = 2*2 物理像素
3、缺点
同一个元素，在不同的屏幕（设备）上，所呈现的效果是不一样的，例如375px宽的一个盒子，在屏幕宽度为375（比例：375/375）或414（比例：375/414）的设备上显示，比例就不同，所以显示效果也不一样
4、解决缺点
需要做屏幕的适配
PC端缩放
放大时：
视口变小
元素的css像素值不变，但一个css像素所占的面积变大了
缩小时：
视口变大
元素的css像素值不变，但一个css像素所占的面积变小了
移动端缩放
放大时：
布局视口不变
视觉窗口变小
缩小时：
布局窗口不变
视觉窗口变大.
缩放注意
移动端缩放不会影响页面的布局，因为缩放的时候布局视口没有变化
移动端的缩放不会改变布局视口中的任何东西
viewport说明
概念
meta-viewport标签时苹果公司在2007年引进的，用于移动端布局视口的控制
<meta name="viewport" content="width=device-width,initial-scale=1.0">
viewport的相关选项：
1、width：布局视口的宽度
2、initial-scale：（系统）初始缩放比例
3、maximum-scale：允许（用户）缩放的最大比例
4、minimum-scale：允许（用户）缩放的最小比例
5、user-scalable：是否允许用户缩放
6、viewport-fit：值设置为‘cover’可以解决刘海屏的留白问题
width
width的值可以是设备宽度标识（device-width），也可以是具体的值，但注意，有一些安卓手机并不支持具体值，IOS全系支持
<meta name="viewport" content="width=device-width">
initial-scale
1、initial-scale为页面初始化时的显示比例
2、initial-scale = 屏幕宽度（设备独立像素）/ 布局视口宽度
3、只写initial-scale = 1.0 也可以实现完美视口，但是为了良好的兼容性，width=device-width和initial-scale=1.0这两个一般都会一起写
<meta name="viewport" content="width=device-width,initial-scale=1.0">
maximum-scale
1、允许用户最大缩放比例，苹果浏览器不支持
2、maximum-scale = 屏幕宽度（独立设备像素）/ 视觉视口宽度值
<meta name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=2.0">
minimum-scale
1、允许用户最小缩放比例
2、minimum-scale = 屏幕宽度（设备独立像素）/ 视觉视口宽度值
<meta name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=2.0,minimum-scale=0.5">
user-scalable
是否允许用户通过手指缩放页面，苹果浏览器不支持
<meta name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=2.0,minimum-scale=0.5,user-scalable=no">
viewport-fit
设置为cover可以解决‘刘海屏’的留白问题
<meta name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=2.0,minimum-scale=0.5,user-scalable=no,viewport-fit=cover">
移动端最好写法
<meta name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,
minimum-scale=1.0,user-scalable=no,viewport-fit=cover">
