媒体查询及使用_代码007(未授权)

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

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

  <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>

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

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

这段代码的几个参数解释：

显示所有内容

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

媒体查询视口

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

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

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

width = device–wi d th	布局视口的宽度等于当前设备视口的宽度
init i al-scale	初始的缩放比例（默认设置为1.0）
mini mum–scale	允许用户缩放到的最小比例（默认设置为1.0）
m axi mum–scale	允许用户缩放到的最大比例（默认设置为1.0）
user–scala ble	用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）

1.什么是媒体 查询

2.查询类型

3.关键字

4.常见 断点

5.代码 演示

6.页面 适配

发表回复取消回复

1.什么是媒体查询

2.查询类型

3.关键字

4.常见断点

5.代码演示

6.页面适配

相关文章

发表回复 取消回复

发表回复取消回复