前端工程师实战20完结：详解手机和PC的像素差异、完美视口、响应式布局与媒体查询

大家好，全套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像素࿰