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

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

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

问题：一个宽度为900px的网页在iphone6中要如何显示呢?
默认情况下，移动端的网页都会将视口设置为980像素（css像素)
以确保pc端网页可以在移动端正常访问，但是如果网页的宽度超过了980,
移动端的浏览器会自动对网页缩放以完整显示网页

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

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

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

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

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

<meta name="viewport" content="width=device-width， initial-scale=1.0"">

放到title前面

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

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

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

vw这个单位永远相当于视口宽度进行计算
网页中字体大小最小是12px，不能设置一个比12像素还小的字体
如果我们设置了一个小于12px的字体，则字体自动设置为12px

所以对于无法整除的数值，可以用less的分数表示