在一些简单的站，我们通常采用响应式让网站兼容各类屏幕大小，这里主要介绍下media ， 通过media来实现不同屏幕大小下使用不同样式处理。
首先我们需要引入 Viewport 属性，为了确保适当的绘制和触屏缩放，需要在 head标签中添加 viewport 元数据标签
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
viewqport 是我们手机上的虚拟窗口、视觉窗口、显示区域，他的作用就是创建一个虚拟窗口，
meta 标签的viewport属性是在移动设备上设置原始大小显示和是否缩放的声明，
可以使用的参数设置如下:
width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，
如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放
演示代码如下：
<!doctype html>
<html>
<head>
<!-- 加入这行代码-->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
</body>
</html>
将Viewport引入页面，下面我们就来介绍下media query
Media Query写法如下:
@media screen and (max-width:989px){
/* 这里面写当屏幕宽度 width <=989px 所使用的样式 */
}
/* 上面的方式可以缩写如下(screen不写,也是默认的是屏幕) */
@media (max-width:989px){
/* 这里面写当屏幕宽度 width <=989px 所使用的样式 */
}
/* 我们也可以写多个条件来指定 */
/* 下面表示当屏幕大于等于 768px 并且小于等于 1200px 所使用的样式 */
@media (min-width:768px) and (max-width:1200px) {
/* 这里面写当屏幕宽度 ( 768px <= width <= 989px ) 所使用的样式 */
}
<!-- 如果样式太多,如要单独写到一个样式文件中，可以使用如下方式引入 -->
<!-- 下面表示，当屏幕宽度 width<=480px 引入该样式文件 demo.css -->
<link rel="stylesheet" type="text/css" media="screen and (max-width: 480px)" href="demo.css" target="_blank" rel="external nofollow" >
一般我们将屏幕分为如下几种:
/* 超小屏幕 ( 手机，小于 768px ) */
@media (max-width: 768px) {
/* 这里写样式文件 */
}
/* 小屏幕 ( 平板，大于等于 768px ) */
@media (min-width: 768px) {
/* 这里写样式文件 */
}
/* 中等屏幕 ( 桌面显示器，大于等于 992px ) */
@media (min-width: @screen-md-min) {
/* 这里写样式文件 */
}
/* 大屏幕 ( 大桌面显示器，大于等于 1200px ) */
@media (min-width: @screen-lg-min) {
/* 这里写样式文件 */
}
下面写一个比较完整的案例，如下演示针对手机及平板分别进行了处理，
也可以在指定屏幕尺寸下将一些元素隐藏，这里就没有全部写出来了，
大家可以根据自己的思路来实现，代码如下：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>demo</title>
<!-- PC屏幕 这里是引入外部样式文件的方式,这里不用media判断，默认就使用pc端样式效果 pc.css -->
<!-- <link rel="stylesheet" href="pc.css" target="_blank" rel="external nofollow" > -->
<!--手机屏幕 这里是引入外部样式文件的方式, 这里是当屏幕 width <= 760px 使用该样式文件 mobile.css -->
<!-- <link rel="stylesheet" media="(max-width:760px)" href="mobile.css" target="_blank" rel="external nofollow" > -->
<!--ipad屏幕 这里是引入外部样式文件的方式 这里是当屏幕 768px <= width <= 1200px 使用该样式文件 ipad.css -->
<!-- <link rel="stylesheet" media="(min-width:768px) and (max-width:1200px)" href="ipad.css" target="_blank" rel="external nofollow" >-->
<!-- 如下是直接在样式中写入-->
<style>
/* 默认就是pc端效果 所以不需要通过media判断 */
*{
font-family:微软雅黑;
margin:0px;
padding:0px;
}
.main{
width:1300px;
margin:0 auto;
}
.top{
height:100px;
background: #272822;
line-height: 100px;
color:#fff;
text-align: center;
font-size:50px;
font-weight: bold;
}
.left{
height:400px;
background: #272822;
line-height: 400px;
color:#fff;
text-align: center;
font-size:50px;
font-weight: bold;
width:642px;
float: left;
}
.right{
height:400px;
background: #272822;
line-height: 400px;
color:#fff;
text-align: center;
font-size:50px;
font-weight: bold;
width:642px;
float: right;
}
.bottom{
height:100px;
background: #272822;
line-height: 100px;
color:#fff;
text-align: center;
font-size:50px;
font-weight: bold;
}
.nav{
height:15px;
clear:both;
}
/*手机屏幕 当屏幕 width <= 760px 指定如下样式 */
@media (max-width:760px){
.main{
width:95%;
}
.top{
background: #faa;
}
.bottom{
background: #faa;
}
.left{
float:none;
width:100%;
height:100px;
line-height: 100px;
margin-bottom:15px;
background: #faa;
}
.right{
float:none;
width:100%;
height:100px;
line-height: 100px;
background: #faa;
}
}
/*平板屏幕 当屏幕 768px <= width <= 1200px 指定如下样式 */
@media (min-width:768px) and (max-width:1200px){
.main{
width:95%;
}
.top{
background: #aaf;
}
.left{
float:none;
width:100%;
height:200px;
line-height: 200px;
margin-bottom:15px;
background: #aaf;
}
.right{
float:none;
width:100%;
height:200px;
line-height: 200px;
background: #aaf;
}
.bottom{
background: #aaf;
}
}
</style>
</head>
<body>
<div class="main">
<div class="top">top</div>
<div class="nav"></div>
<div class="left">left</div>
<div class="right">rigth</div>
<div class="nav"></div>
<div class="bottom">bottom</div>
</div>
</body>
</html>
![全面解析Vue3 Reactive家族和Ref家族API[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)