CSS像素和物理像素（移动端完美视口）

像素：

• 屏幕是由一个一个发光的小点构成，这一个个的小点就是像素
• 分辨率：1920 x 1080 说的就是屏幕中小点数量
• 在前端开发中像素要分成两种情况讨论：CSS像素和物理像素
• 物理像素，上述所说的小点点就是属于物理像素
• CSS像素，编写网页时，我们所用像素都是CSS像素
• 浏览器在显示网页时，需要将CSS像素转换为物理像素然后再呈现
• 一个CSS像素最终由几个物理像素显示，由浏览器来决定
• 默认情况下在pc端，一个CSS像素 = 一个物理像素

---

视口( viewport )

• 视口就是屏幕中用来显示网页的区域

• 可以通过查看视口的大小，来观察CSS像素和物理像素的比值

• 默认情况下：
  视口宽度 1920px （CSS像素）
  视口宽度 1920px （物理像素）
  此时，CSS像素和物理像素的比就是1:1

• 网页放大两倍的情况：
  视口宽度：960px（CSS像素）
  视口宽度：1920px（物理像素）
  此时，CSS像素和物理像素的比就是1:2

可以通过改变视口的大小，来改变CSS像素和物理像素的比值

---

手机像素

• 在不同的屏幕，单位像素的大小是不同的，像素越小屏幕越清晰
• 智能手机的像素点 远远低于 计算机的像素点
• 默认情况下，移动端的网页都会将视口设置为980像素（CSS像素）
• 如果网页超过了980像素，移动端的浏览器会自动对网页进行缩放以完整显示网页

---

• 移动端默认的视口大小是980像素（CSS像素）
• 默认情况下，移动端的像素比就是 980/移动端宽度 （980/750）
• 如果我们直接在网页中编写移动端代码，这样在980的视口下，像素比是非常不好，导致页面中的内容非常小
• 编写移动端页面时，必须要确保有一个比较合理的像素比（1CSS像素 对应 2个/3个物理像素）

---

完美视口

• 每一个移动设备设计时，都会有一个最佳的像素比
• 一般我们只需将像素比设置为该值即可得到一个最佳效果
• 将像素比设置为最佳像素比的视口大小我们称其为完美视口

可以通过 meta 标签来设置视口大小

将网页设置为完美视口：

  <meta name="viewport" content="width=device-width">

---

在移动端开发中的视口问题（VW单位）

• 不同的设备完美视口的大小是不一样的
• 由于不同设备的视口和像素比不同，所以同样的375个像素在不同的设备下意义是不同的（比如在iPhone6中 375就是全屏，而到了plus就会缺一块）
• 所以在移动端的开发时，就不能再使用px来进行布局了
• vw 表示的是视口的宽度（viewport width）
• 100vw = 一个视口的宽度
• 1vw = 1%视口宽度
• vw这个单位永远相当于视口宽度进行计算
• 移动端常用的视口宽度为750px 和 1125px
• 例子：设计图750px

1. 使用vw作为单位
2. 100vw = 750px（设计图的像素）–> 0.13333vw = 1px

移动端开发设计：

html{
	/*
		网页中的字体大小最小就是12px，不能设置一个比12px还小的字体
			如果我们设置了一个小于12px的字体，则字体自动设置为12px

		0.133333vw = 1px
		乘于40得：
		5.333333vw = 40px
	*/
	font-size: 5.3333333vw;
}

.box{
	/*
		1rem = 1 html的字体大小
		1rem = 40px(设计图)
	*/
	width: 18.75rem;  /* 750px/40 */
	height:0.875rem; 
}