一、媒体查询
媒体查询能使页面在不同在终端设备下达到不同的效果
媒体查询会根据设备的大小自动识别加载不同的样式
设置meta标签
使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签。
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
参数解释
width = device-width宽度等于当前设备的宽度initial-scale初始的缩放比例（默认设置为1.0）maximum-scale允许用户缩放到的最大比例（默认设置为1.0）user-scalable用户是否可以手动缩放（默认设置为no）
根据不同的页面大小，实现不同的页面效果
<!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>
.box{
background-color: greenyellow;
}
@media screen and (max-width:768px) {
body{
background-color: pink;
}
}
@media screen and (min-width:768px) and (max-width:992px){
body{
background-color: orange;
}
}
@media screen and (min-width:992px) {
body{
background-color: green;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>二、响应式布局
一说到响应式设计，肯定离不开媒体查询media
响应式布局意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式
响应式布局的优缺点
优点
- 面对不同分辨率设备灵活性强
- 能够快捷解决多设备显示适应问题
缺点
- 兼容各种设备工作量大，效率低下
- 代码累赘，会出现隐藏无用的元素，加载时间加长
<!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>
*{
margin: 0;
padding: 0;
}
.nav{