Unit Four: 弹性盒子Flex(02)—像素&视口
1. 像素
-
屏幕是由一个一个发光点构成，一个发光点就是一个像素。
-
分辨率：1920*1080就是屏幕中发光点的数量。
-
CSS像素和物理像素
- 物理像素
- 屏幕发光点（分辨率）
- CSS像素
- 编写网页时给予的数值。
- 浏览器在现实网页时需要将CSS像素转换为物理像素，然后再呈现。
- 一个CSS像素最终由几个物理像素显示，由浏览器决定：
- 默认情况下，在pc端，一个CSS像素=一个物理像素。
- 物理像素
2. 视口（Viewport）
-
视口就是屏幕中用来显示网页的区域。
-
可以通过查看视口大小来观察CSS像素和物理像素的比例。
-
默认情况下：
-
视口宽度：
- CSS像素：1920px
- 物理像素：1920px
两者比例1：1
-
-
浏览器放大1倍：
-
视口宽度：
- CSS像素：960px
- 物理像素：1920px
两者比例1：2
-
-
浏览器缩小1倍
-
视口宽度：
- CSS像素：（1920*2）px
- 物理像素：1920px
两者比例2：1
-
3.手机像素
不同的屏幕，单位像素的大小不同，像素越小屏幕越清晰。
- 24寸屏幕 1920*1080
- iphone 6 750*1334
- 智能手机的像素点远远小于计算机像素点，所以手机显示较清晰。
默认情况下，移动端的网页都会将视口像素设置为980像素（CSS像素），以确保网页可以显示全貌。
但是网页宽度超过980，移动端的浏览器会自动对网页缩放以完整显示网页。
缺点：虽然可以正常显示，但浏览体验不好，需要专门开发移动端页面。
4.完美视口
通过<meta>标签来设置视口大小。
-
每一款移动设备设计时，都会有一个最佳的像素比。
-
一般我们只需将像素比设置为该值即可得到一个最佳效果。
-
完美视口：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5. vw单位
vw（viewport width）表示视口的宽度。
-
100vw = 一个视口的宽度
-
1vw = 1%视口宽度
-
设计图常见宽度
- 一倍图：375px
- 两倍图：750px
- 三倍图：1125px
-
px和vw换算
- 两倍图：750px(设计图)=100vw(网页端)
-
vw适配
-
rem
rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。
-
注意：网页中字体大小最小是12px,不能设置一个比12像素还小的字体。如果我们设置了一个小于12px的字体，则字体自动设置为12px。
-
解决方案
html{ /* 750px(设计图)=100vw(网页端) 1px = 0.13333vw 10px = 1.3333vw 100px = 13.333vw */ /* font-size:10px */ font-size: 1.333vw; -webkit-text-size-adjust:none } .box1{ /* width:48px; */ width: 4.8rem; /* height:35px; */ height:3.5rem; border: 1rem solid red; background-color: #bfa; }-
less解决方案
/*设置移动端屏幕大小*/ @total-width:750; html{ /*计算出10px=多少vw(1.3333vw)*/ font-size: (100vw/@total-width)*10; } .content{ /*693px*/ width: 69.3rem; } .title{ display:flex; height:17.5rem; justify-content:space-between; align-items:content; }
-