移动端适配

像素

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

分辨率：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像素和物理像素的比值

移动端

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

​ 24寸 1920x1080

​ i6 4.7寸 750 x 1334

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

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

默认情况下，移动端的网页都会将视口设置为980像素（css像素）
以确保pc端网页可以在移动端正常访问，但是如果网页的宽度超过了980
移动端的浏览器会自动对网页缩放以完整显示网页

查询移动端分辨率 https://material.io/resources/devices/

所以基本大部分的pc端网站都可以在移动端中正常浏览，但是往往都不会有一个好的体验
为了解决这个问题，大部分网站都会专门为移动端设计网页

移动端页面

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

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

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

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

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

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

将网页的视口设置为完美视口

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

视口

不同的设备完美视口的大小是不一样的
iphone6 -- 375
iphone6plus -- 414

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

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

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

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

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

100vw = 750px(设计图的像素) 0.1333333333333333vw = 1px
6.4vw = 48px(设计图像素)
4.667vw = 35px

vw 适配

我们可以设置 rem 来方便使用 vw 单位

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

0.1333333vw = 1px （100/750）
5.3333vw = 40px

html{
    font-size: 5.3333vw;
}

.box1{
    /* 
    rem
    - 1 rem = 1 html的字体大小
    - 1 rem = 40 px(设计图)
    */
     1.2rem;
    height: 0.875rem;
    background-color: #bfa;
}