像素与视口
像素
屏幕是由一个一个发光的小点构成,这一个个的小点就是像素
分辨率: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;
}
}