媒体查询
阅读 (363)一、媒体查询概述
-
说明
设备终端的多样化,直接导致了网页的运行环境变的越来越复杂,为了能够保证我们的网页可以适应多个终端,不得不专门为某些特定的设备设计不同的展示风格,通过媒体查询可以检测当前网页运行在什么终端,可以有机会实现网页适应不同终端的展示格。
-
什么是媒体查询
媒体查询(Media Query)是CSS3新语法。
使用 @media查询,可以针对不同的媒体类型定义不同的样式
@media 可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面
目前针对很多苹果手机、Android手机,平板等设备都用得到多媒体查询
二、媒体查询语法规范
- 标准
- 用 @media开头 注意@符号
- mediatype 媒体类型
- 关键字 and not only
- media feature 媒体特性必须有小括号包含
-
语法
用 @media开头 注意@符号
@media mediatype and|not|only (media feature) { CSS-Code; }
-
媒体类型
mediatype 将不同的终端设备划分成不同的类型,称为媒体类型
值 | 描述 |
---|---|
all | 用于所有设备 |
用于打印机和打印预览 | |
scree | 用于电脑屏幕,平板电脑,智能手机等 |
-
关键字 and not only
关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。
and:可以将多个媒体特性连接到一起,相当于“且”的意思。
not:排除某个媒体类型,相当于“非”的意思,可以省略。
only:指定某个特定的媒体类型,可以省略。
-
媒体特性
每种媒体类型都具体各自不同的特性,根据不同媒体类型的媒体特性设置不同的展示风格。
注意他们要加小括号包含
-
媒体查询书写规则
注意: 为了防止混乱,媒体查询我们要按照从小到大或者从大到小的顺序来写,但是我们最喜欢的还是从小到大来写,这样代码更简洁
针对<540px的屏幕:max-width:540px
针对>540px的屏幕:min-width:540px
针对>960px的屏幕:min-width:960px
三 、实战案例
案例一: 媒体查询+rem 实现页面宽度改变背景变色
-
步骤
① 按照屏幕从大到小的或者从小到大的判断的方式
② 最大值 max-width 和最小值 min-width都是包含等于的
③ 当屏幕小于520px, 背景颜色变为红色 (x <= 519)
④ 当屏幕大于等于520px 并且小于等于 960px的时候 背景颜色为黄色 ( 520=<x <= 959)
⑤ 当屏幕大于等于 960像素时,背景颜色为绿色 ( x >= 960)
-
代码
<style> @media screen and (max-width: 519px){ body{ background-color: red; } } @media screen and (min-width:520px) and (max-width: 959px){ body{ background-color:yellow; } } @media screen and (min-width: 960px){ body{ background-color: green; } } </style>
-
注意
为了防止混乱,媒体查询我们要按照从小到大或者从大到小的顺序来写,但是推荐大家是从小到大来写,这样会让代码更简洁
针对<540px的屏幕:max-width:540px
针对>540px的屏幕:min-width:540px
针对>960px的屏幕:min-width:960px
<style> @media screen and (max-width: 519px){ body{ background-color: red; } } @media screen and (min-width:520px) { body{ background-color:yellow; } } @media screen and (min-width: 960px){ body{ background-color: green; } } </style>
案例二:媒体查询+rem 实现元素大小动态变化
-
说明
rem单位是跟着html来变化的,有了rem页面元素可以设置不同大小尺寸
媒体查询可以根据不同设备宽度来修改样式
媒体查询+rem 就可以实现不同设备宽度,实现页面元素大小的动态变化
案例:媒体查询+rem实现元素变化
-
代码
<style> @media screen and (max-width: 320px){ html{ font-size: 30px; } } @media screen and (min-width:640px) { html{ font-size: 70px; } } @media screen and (min-width: 960px){ html{ font-size: 100px; } } #banner{ height: 1rem; font-size: 0.5rem; background-color: red; color: white; text-align: center; } </style>
四、link中判断设备引入样式
-
说明
如果样式比较繁多的情况下,可以针对不同的媒体使用不同 stylesheets(样式表)。
原理,就是直接在link中判断设备的尺寸,然后引用不同的css文件。
- 语法规范
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
- 示例
<link rel="stylesheet" href="styleA.css" media="screen and (min-width: 400px)">