移动端基础物理像素、分辨率、逻辑像素、设备像素、缩放、ppi视口、meta

移动端基础

物理像素 像素点

移动端设备的屏幕都是由一个个点组成的，每个屏幕上的点一定是有限的，现在技术还做不到无限个点，这些点可以叫做像素，或者叫物理像素。

分辨率

每一个长度方向上的像素个数乘以每一个宽度方向上的像素个数的表达形式是分辨率。

屏幕尺寸相同的手机，包含的像素点个数是不确定的，像素点越小，同一方向上容纳的像素个数就越多，图像显示就越精细

1px是否=一个物理像素

在早期的屏幕也就是普通屏、标清屏中1css像素 = 1个物理像素

随着Retina（视网膜屏）等技术兴起，能够将更多的物理像素点压缩到一块屏幕中，从而达到更高的分辨率，提升屏幕显示的细腻度。

分辨率：4 * 2（横向上两个像素点，纵向上4个像素点）
分辨率：8 * 4 （横向上4个像素点，纵向上8个像素点）

逻辑像素

逻辑像素也叫css像素、设备独立像素，可以理解为是在css里的像素点，也就是说css像素是逻辑像素的一种。
css像素的单位也叫PX，是图像显示的基本单元。
css像素 = 设备独立像素 = 逻辑像素

开发中使用的像素

.box{
	width: 2px;
	height: 2px;
}

总结：
在标清屏下，1个逻辑像素，使用一个物理像素表示，所以盒子中使用2 * 2个物理像素是表示。
在高清屏下，1个逻辑像素，使用两个物理像素表示，所以盒子最终使用4 * 4个物理像素表示。
整体来说，表示同样的一个盒子，高清屏使用的物理像素是标清屏的4倍
如果从一个方向上来说，高清屏使用的物理像素是标清屏的2倍（这也是后面说到的2倍图的由来）
css 代码在浏览中运行时，浏览器根据当前设备屏幕情况，自己选择到底使用几个物理像素表示1个逻辑像素，不需要开发者参与。

设备像素比

dpr: device pixel ratio
dpr = 设备像素/css像素
表示一个设备的物理像素与逻辑像素的比，只考虑一个方向

缩放

物理像素是不能改变大小的，缩放改变的是1css像素等于多少个物理像素，就是改变一个css像素需要多少个物理像素表示。

放大

原：一个方向上 一个css像素等于一个物理像素
放大二倍后：一个方向上一个css像素等于两个物理像素

缩小

原：一个方向上 一个css像素等于一个物理像素
缩小二倍后：一个方向上一个css像素等于二分之一个物理像素

ppi

简称：ppi
全名：dots per inch
ppi表示的是每英寸所拥有的像素数目，即在一个对角线长度为1英寸的正方形内所拥有的物理像素数。像素色块越小或者分辨率越高则ppi越大。

视口

视口（viewport）就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口

布局视口 layout viewport.

为了在手机上也能够显示这些为pc端专门设置的页面，出现了布局视口的概念。

布局视口的宽度一般为980，也有1024的，

视觉适口 visual viewport

就是用户正在看到的网站的区域

理想视口 ideal viewport

布局视口>视觉视口，所以会在视觉视口中出现横向滚动条，用户体验效果很差。

理想视口，对设备来讲，是最理想的视口尺寸，为了使网站在移动端有最理想的浏览和阅读宽度而设定

需要设置 meta 标签进行设置

meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽

总结：我们开发最终会用理想视口，而理想视口就是将布局视口的宽度修改为视觉视口

meta标签（理想视口的设定）

通常在写移动端页面的时候，我们都会设置viewport，保证页面缩放没有问题。

参数：
device-width设备宽度、initial-scale初始缩放比、minimum-scale允许用户缩放到的最小比例、maximum-scale允许用户缩放到的最大比例、user-scalable用户是否可以手动缩放 (no/yes)

meta元标签分两大部分：HTTP 标题信息（http-equiv）和页面描述信息（name）

HTTP 标题信息（http-equiv）

http-equiv 属性的 Content-Type 值（显示字符集的设定）

说明：设定页面使用的字符集，用以说明主页制作所使用的文字语言，浏览器会根据此来调用相应的字符集显示 page 内容。
语法：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

该 meta 标签定义了 HTML 页面所使用的字符集为 utf-8 ，就是万国码。它可以在同一页面显示中文简体、繁体及其它语言（如日文，韩文）等
设置编码格式语法：

<meta charset="utf-8">

页面描述信息（name）

提供有关页面的元信息，标签位于文档的头部，不包含任何内容。
还包含页面描述信息（name），主要有以下几个作用：叙述网页关键词、描述页面（设置页面说明）、添加作者信息、设置移动屏幕缩放。

name 属性为viewport 时，主要控制移动屏幕的缩放

name 属性为viewport 可视区域时取值（可以操作的属性有 4 个）：

• width – viewport 的宽度 （范围从 200 到 10,000，默认为 980 像素）
• height – viewport 的高度 （范围从 223 到 10,000 ）
• initial-scale – 初始的缩放比例 （范围从 > 0 到 10）
• minimum-scale – 允许用户缩放到的最小比例
• maximum-scale – 允许用户缩放到的最大比例
• user-scalable – 用户是否可以手动缩放 (no，yes)

移动端开发时常用语法

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

最标准的viewport设置

• 视口宽度和设备保持一致
• 视口的默认缩放比例1.0
• 不允许用户自行缩放
• 最大允许的缩放比例1.0
• 最小允许的缩放比例1.0

box-sizing 标签

css 中的 box-sizing 属性定义了user agent 应该如何计算一个元素的总宽度和总高度

box-sizing 属性值:
content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。

box 告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。