CSS布局相关知识点（六）：移动端适配

物理像素 vs CSS像素

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

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

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

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

浏览器在显示网页时，需要将CSS像素转换为物理像素然后再呈現
一个css像素最终由几个物理像素显示，由浏览器决定：
默认情况下在pc端，一个css像素=一个物理像素

视口（viewport）

视口就是屏幕中用来显示网页的区域
可以通过查看视口的大小，来观察CSS像素和物理像素的比值

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

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

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

为什么要设计移动端布局、完美视口

在不同的屏幕，单位像素的大小是不同的，像素越小屏幕会越清晰，智能手机的像素点实际大小远远小于计算机的像素点，所以基本大部分的pc端网站都可以在移动端中正常浏览，但是往往都不会有一个好的体验，为了解决这个问题，大部分网站都会专门为移动端设计网页

24寸电脑屏幕分辨率：1920x1080 （物理像素）视口 ：1920x1080（css像素）
iphone 13屏幕分辨率：2532x1170 （物理像素），视口 ：844x390（css像素）
 

编写移动页面时，必须要确保有一个比较合理的像素比：
1css像素 对应 2个物理像素
1css像素 对应 3个物理像素

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

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

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

移动端开发时布局单位：vw（viewport width）

不同的设备完美视口的大小是不一样的
iphone6--375，iphone6plus--414
由于不同设备视口和像素比不同，所以同样的375个像素在不同的设备下意义是不一样，
比如在iphone6中 375就是全屏，而到了plus中375就会缺一块
所以在移动端开发时，就不能再使用px来进行布局了

vw 表示的是视口的宽度（viewport width）
100vw＝一个视口的宽度
1vw＝1％视口宽度
vw这个单位永远相当于视口宽度进行计算

设计图的宽度
750px 1125px
设计图
750px
使用vw作为单位
100vw
创建一个48pxx35px 大小的元素
100vw＝750px（设计图的像素）0.1333333333333333vw ＝ 1px

6.4vw＝48px（设计图像素）
4.667vw=35px

CSS的最小尺寸为1px，所以理论上可以将font-size设置为1px，但是实际上如果将font-size属性缩小到12px以下就没有效果了，这是因为pc端浏览器限制了中文最小字体大小

所以使用rem作单位的时候可以将html的font-size=12px放大至方便换算的大小，如100px

Font-size=13.333vw = 100px = 1rem

京东用的是放大40，不过想放大几倍就放大几倍，不如就用100吧好算一点。

px、vw、em、rem 的区别及使用场景

• px 是固定的像素，用于适配少部分移动设备，且分辨率对页面影响不大的
• em 和 rem是相对长度单位，其长度不是固定的，更适用于响应式布局
• em 是相对于其父元素文本尺寸来设置大小，会带来问题
•  rem 是相对于根元素html的font-size（默认16px）