大家好,全套HTML和CSS入门与实战课程正在我的专栏《HTML与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,一个物理像素对应2个css像素
我们可以通过改变视口的大小,来改变CSS像素和物理像素的比值
放大网页就是视口变小
<!--more-->
手机像素
在不通的屏幕,单位像素的大小是不同的,像素越小屏幕会越清晰
24寸 1920x1080
i6 4.7寸 750 x 1334
智能手机的像素点 远远小于 计算机的像素点
一个宽度为900px的网页在iphone6中要如何显示呢?
iphone6的水平方向像素是750,但我们这里并没有把屏幕撑满
这是因为900px是css像素,750是物理像素,而应该看他的视口大小
默认情况下,移动端的网页都会将视口设置为980像素