像素与视口

像素

屏幕是由一个一个发光的小点构成，这一个个的小点就是像素

分辨率：1920x1080说的就是屏幕中小点的数量

在前端开发中像素要分成两种情况讨论：css像素 和 物理像素

• 物理像素，上述所说的小点点就属于物理像素
• css像素，编写网页时，我们所用像素都是css像素

浏览器在显示网页时，需要将css像素转换为物理像素然后再呈现

一个css像素最终由几个物理像素显示，由浏览器决定：

默认情况下在pc端，一个css像素=一个物理像素

视口（viewport）

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

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

默认情况下的视口宽度

• 1920px（css像素）
• 1920px（物理像素）
• 此时，css像素和物理像素的比是1:2

放大两倍的视口宽度

• 960px（CSS像素）
• 1920px（物理像素）
• 此时，css像素和物理像素的比是1:2

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

手机像素

在不同的屏幕，单位像素的大小是不同的，像素越小屏幕会越清晰

设备	尺寸	分辨率
PC	24寸	1920×1080
iPhone 6	4.7寸	750×1334

智能手机的像素点远远小于计算机的像素点

问题：一个宽度为900px的网页在iPhone6中要如何显示呢？

默认情况下，移动端的网页都会将视口设置为980像素（css像素），以确保pc端网页可以在移动端正常访问

但是如果网页的宽度超过了980像素，移动端的浏览器会自动对网页缩放以完整显示网页

所以基本大部分的pc端网站都可以在移动端中正常浏览，但是往往都不会有一个好的体验

为了解决这个问题，大部分网站都会专门为移动端设计网页

完美视口

移动端默认的视口大小是980px（css像素），默认情况下，移动端的像素比就是980/移动端宽度（980/750）

如果我们直接在网页中编写移动端代码，这样在980的视口下，像素比是非常不好，导致网页中的内容非常非常的小

编写移动页面时，必须要确保有一个比较合理的像素比：

• 1个css像素对应2个物理像素
• 1个css像素对应3个物理像素

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

<meta name="viewport" content="width=375px" />

每一款移动设备设计时，都会有一个最佳的像素比，一般我们只需要将像素比设置为该值，即可得到一个最佳效果

将像素比设置为最佳像素比的视口大小我们称其为完美视口

<-- 将网页的视口设置为完美视口 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

结论：以后再写移动端的页面，就把上边这个玩意先写上

vw单位

不同的设备完美视口的大小是不一样的

• iphone6 -- 375
• iphone6 plus -- 414

由于不同设备视口和像素比不同，所以同样的375个像素在不同的设备下意义是不一样

比如在iphone6中375就是全屏，而到了plus中375就会缺一块

所以在移动端开发时，就不能再使用px来进行布局了

vw

vw表示的是视口的宽度（viewport width）

• 100vw = 一个视口的宽度
• 1vw = 1%视口宽度

vw这个单位永远相当于视口宽度进行计算

常见的设计图宽度

• 750px 375px X 2
• 1125px 375px X 3

设计图

• 750px

使用vw作为单位

• 100vw

创建一个48px × 35px大小的元素

• 100vw=750px（设计图的像素）
• 0.1333333333333333vw=1px
• 6.4vw=48px
• 4.667VW=35px

vw适配

rem

1rem = 1个html的字体大小

网页中字体大小最小是12px，不能设置一个比12像素还小的字体

如果我们设置了一个小于12px的字体，则字体自动设置为12