视口(viewport)
- 视口就是屏幕中用来显示网页的区域 - 可以通过查看视口的大小,来观察CSS像素和物理像素的比值 - 默认情况下: 视口宽度 1920px(CSS像素) 1920px(物理像素) - 此时,css像素和物理像素的比是 1:1
-
放大两倍的情况: 视口宽度 960px(CSS像素) 1920px(物理像素)
-
此时,css像素和物理像素的比是1:2
- 我们可以通过改变视口的大小,来改变CSS像素和物理像素的比值
视口比
https://material.io/resources/devices/
vw
表示的是视口的宽度(viewport width)
-
100vw = 一个视口的宽度
-
1vw = 1%视口宽度
vw这个单位永远相当于视口宽度进行计算
设计图的宽度 750px 1125px 设计图 750px 使用vw作为单位 100vw 创建一个 48px x 35px 大小的元素 100vw = 750px(设计图的像素) 0.1333333333333333vw = 1px 6.4vw = 48px(设计图像素) 4.667vw = 35px
vw 适配
网页中字体大小最小是12px,不能设置一个比12像素还小的字体如果我们设置了一个小于12px的字体,则字体自动设置为12
0.1333333vw = 1px 5.3333vw = 40px
rem 1 rem = 1 html的字体大小 1 rem = 40 px(设计图)
媒体查询
-
语法:@media 查询规则{} 媒体类型: all 所有设备 print 打印设备 screen 带屏幕的设备 speech 屏幕阅读器
-
可以使用,连接多个媒体类型,这样它们之间就是一个或的关系
可以在媒体类型前添加一个only,表示只有。 only的使用主要是为了兼容一些老版本浏览器
-
@media print,screen{ body{ background-color: #bfa; }
@media only screen { body{ background-color: #bfa; } }
-
响应式布局
-
网页可以根据不通的设备或窗口大小呈现出不同的效果
-
使用响应式布局,可以使一个网页适用于所有设备
-
响应布局的关键就是 媒体查询
-
通过媒体查询,可以为不通的设备,或设备不同状态来分别设置样式
-
-
媒体特性: width 视口的宽度 height 视口的高度
min-width 视口的最小宽度(视口大于指定宽度时生效) max-width 视口的最大宽度(视口小于指定宽度时生效)
@media (max-width: 500px){ body{ background-color: #bfa; } }
-
样式切换的分界点,我们称其为断点,也就是网页的样式会在这个点时发生变化一般比较常用的断点
小于768 超小屏幕 max-width=768px 大于768 小屏幕 min-width=768px 大于992 中型屏幕 min-width=992px 大于1200 大屏幕 min-width=1200px
@media only screen and (min-width: 500px) and (max-width:700px){ body{ background-color: #bfa; } }
像素:
-
屏幕是由一个一个发光的小点构成,这一个个的小点就是像素
-
分辨率:1920 x 1080 说的就是屏幕中小点的数量
-
在前端开发中像素要分成两种情况讨论:CSS像素 和 物理像素
-
物理像素,上述所说的小点点就属于物理像素
-
CSS像素,编写网页时,我们所用像素都是CSS像素
浏览器在显示网页时,需要将C SS像素转换为物理像素然后再呈现 一个css像素最终由几个物理像素显示,由浏览器决定:默认情况下在pc端,一个css像素 = 一个物理像素
-
-
设置视口大小 device-width表示设备的宽度(完美视口)
<meta name="viewport" content="width=device-width">
-
移动端默认的视口大小是980px(css像素),
-
默认情况下,移动端的像素比就是 980/移动端宽度 (980/750)如果我们直接在网页中编写移动端代码,这样在980的视口下,像素比是非常不好, 导致网页中的内容非常非常的小
-
编写移动页面时,必须要确保有一个比较合理的像素比: 1css像素 对应 2个物理像素 1css像素 对应 3个物理像素
-
-
可以通过meta标签来设置视口大小
<meta name="viewport" content="width=device-width, initial-scale=1.0">