前端学习笔记100-响应式布局
响应式布局
打开小米商城,可以看到网页右侧有这个,
如果我把网页缩小,它会自动变成这个,
打开jQuery官网,改变它的宽度,有如下效果,
这就是我们这节要学的响应式布局。
媒体查询
响应式布局:网页可以根据不同的设备或窗口大小呈现出不同的效果。
通过响应式布局,可以使一个网页适用于所有设备。
响应式布局的关键是媒体查询。
通过媒体查询,可以为不同的设备或设备的不同状态分别设置样式。
打开zeal,搜索media,
点这个,可以看例子。
语法
@media 查询规则()
media types(媒体类型)
all:所有设备
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@media all {
body{
background-color: #bfa;
}
}
</style>
</head>
<body>
</body>
</html>
这个代码表示所有设备下,背景颜色都是#bfa。
print:打印设备。
@media print {
body{
background-color: #bfa;
}
}
screen:带屏幕的设备
speech:屏幕阅读器
可以用,写好几种媒体类型。(一般不会这么写,如果有多种,直接写all就完事了)
@media print,screen{
body{
background-color: #bfa;
}
}
可以在媒体类型前些only,表示只有在这个类型才有效。(这个有点鸡肋,不写only的话,也是只有这个类型才有效。它的作用是有些老版本浏览器在显示媒体响应中的东西时会有问题,如果我前面加一个only,老版本浏览器则会忽略掉媒体响应的内容。)
@media only screen{
body{
background-color: #bfa;
}
}
edge的显示:
为了验证一下老版本的浏览器在这里是否真的会忽略掉媒体响应,我试了下ie的老版本,如下图。可以看到,ie9以下的忽略了媒体查询。