媒体查询及使用-Toy模板网

这篇具有很好参考价值的文章主要介绍了媒体查询及使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.什么是媒体查询

媒体查询(Media Query)是CSS3新语法。

媒体查询可以根据当前显示设备的特性(如：视口宽度, 屏幕比例，设备显示方向)为其添加css样式，使用媒体查询可以在不改变页面内容的情况下为特定的设备显示特定的样式。如果没有媒体查询就不能。媒体查询能够帮助我们更方便的判断当前设备特性（视口宽度等），更方便的针对视口设置合适的样式。总之：媒体查询可以让网页适应多个终端。

2.查询类型

将不同的终端设备划分为不同的类型，称为媒体类型

all	用于所有设备
print	用于打印机和打印预览
scree	用于电脑屏幕，拼版电脑，手机等

3.关键字

关键字将媒体类型或多个特性连接到一起做为媒体查询的条件

and	可以将多个媒体特性连接到一起，相当"且"于的意思
not	排除某个媒体类型，相当于"非"的意思，可以省略
only	指定某个特定的媒体类型，可省略

4.常见断点

<768px 超小屏幕，一般是手机	（max-width:768px）
>768px 小屏幕	（min-width:768px）
>992px 中型屏幕，一般是平板	（min-width:992px)
>1200px 电脑屏幕	（min-width:1200px)

5.代码演示

长度宽度为500px、背景颜色为红色的盒子在窗口宽度变为500px以下时，盒子也随之变为长度宽度200px、背景颜色蓝色。

  <style>
    div{
        width: 500px;
        height: 500px;
        background-color: red;
        margin: 0 auto;
    }
    @media screen and (max-width:500px){
        div{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    }
  </style>

6.页面适配

为了在移动端让页面获得更好的显示效果，我们必须让布局视口、视觉视口都尽可能等于理想视口。我们可以借助<meta>元素的viewport来帮助我们设置视口、缩放等

<meta name="viewport" content="width=device-width”, 
        initial-scale=1.0, 
        maximum-scale=1.0,
        minimum-scale=1.0,  
        user-scalable=no">

这段代码的几个参数解释：文章来源地址https://www.toymoban.com/news/detail-741595.html

width = device-width	布局视口的宽度等于当前设备视口的宽度
initial-scale	初始的缩放比例（默认设置为1.0）
minimum-scale	允许用户缩放到的最小比例（默认设置为1.0）
maximum-scale	允许用户缩放到的最大比例（默认设置为1.0）
user-scalable	用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）