前端基础入门之css像素与视口和媒体查询

像素与视口

像素

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

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

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

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

浏览器在显示网页时，需要将css像素转换为物理像素然后再呈现

一个css像素最终由几个物理像素显示，由浏览器决定：

默认情况下在pc端，一个css像素=一个物理像素

视口（viewport）

视口就是屏幕中用来显示网页的区域

可以通过查看视口的大小，来观察css像素和物理像素的比值

默认情况下的视口宽度

• 1920px（css像素）
• 1920px（物理像素）
• 此时，css像素和物理像素的比是1:1

放大两倍的视口宽度

• 960px（CSS像素）
• 1920px（物理像素）
• 此时，css像素和物理像素的比是1:2

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

手机像素

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

设备	尺寸	分辨率
PC	24寸	1920×1080
iPhone 6	4.7寸	750×1334

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

问题：一个宽度为900px的网页在iPhone6中要如何显示呢？

默认情况下，移动端的网页都会将视口设置为980像素（css像素），以确保pc端网页可以在移动端正常访问

但是如果网页的宽度超过了980像素，移动端的浏览器会自动对网页缩放以完整显示网页

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

为了解决这个问题，大部分网站都会专门为移动端设计网页

完美视口

移动端默认的视口大小是980px（css像素），默认情况下，移动端的像素比就是980/移动端宽度（980/750）

如果我们直接在网页中编写移动端代码，这样在980的视口下，像素比是非常不好，导致网页中的内容非常非常的小

编写移动页面时，必须要确保有一个比较合理的像素比：

• 1个css像素对应2个物理像素
• 1个css像素对应3个物理像素

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

<meta name="viewport" content="width=375px" />

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

将像素比设置为最佳像素比的视口大小我们称其为完美视口

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

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

vw单位

不同的设备完美视口的大小是不一样的

• iphone6 – 375
• iphone6 plus – 414

由于不同设备视口和像素比不同，所以同样的375个像素在不同的设备下意义是不一样

比如在iphone6中375就是全屏，而到了plus中375就会缺一块

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

vw

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

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

vw这个单位永远相当于视口宽度进行计算

常见的设计图宽度

• 750px 375px X 2
• 1125px 375px X 3

https://www.material.io/blog/device-metrics

设计图

• 750px

使用vw作为单位

• 100vw

创建一个48px × 35px大小的元素

• 100vw=750px（设计图的像素）
• 0.1333333333333333vw=1px
• 6.4vw=48px
• 4.667VW=35px

vw适配

rem

1rem = 1个html的字体大小

网页中字体大小最小是12px，不能设置一个比12像素还小的字体

如果我们设置了一个小于12px的字体，则字体自动设置为12

媒体查询

响应式布局

• 网页可以根据不通的设备或窗口大小呈现出不同的效果
• 使用 响应式布局，可以使一个网页适用于所有设备
• 响应布局的关键就是 媒体查询
• 通过媒体查询，可以为不同的设备，或设备不同状态来分别设置样式

媒体查询

媒体查询语法

• @media查询规则{}

媒体类型

• all 所有设备
• print 打印设备
• screen带屏幕的设备
• speech 屏幕阅读器

可以使用,连接多个媒体类型，这样它们之间就是一个或的关系

可以在媒体类型前添加一个only，表示只有。only的使用主要是为了兼容一些老版本浏览器

媒体特性

• width 视口的宽度
• height 视口的高度
• min-width 视口的最小宽度（视口大于指定宽度时生效）
• max-width 视口的最大宽度（视口小于指定宽度时生效）

断点

样式切换的分界点，我们称其为断点，也就是网页的样式会在这个点时发生变化一般比较常用的断点

范围（px）	类型（屏幕）	写法（媒体特性）
小于768	超小屏幕	max-width=768px
大于768	小屏幕	min-width=768px
大于992	中型屏幕	min-width=992px
大于1260	大屏幕	min-width=1200px

示例

当屏幕宽度为500px和700px之间时，背景色变为#bfa

@media only screen and (min-width:500px) and (max-width:700px) {
    
    
    body{
    
    
        background-color: #bfa;
    }
}