媒体查询（Media Query）

媒体查询（Media Query）是CSS3新语法。

使用 @media查询，可以针对不同的媒体类型定义不同的样式
@media 可以针对不同的屏幕尺寸设置不同的样式

媒体查询语法规范

用 @media开头注意@符号
mediatype 媒体类型
关键字 and not only
media feature 媒体特性必须有小括号包含

@media mediatype and|not|only (media feature) {CSS-Code;
}

1. mediatype 查询类型：将不同的终端设备划分成不同的类型，称为媒体类型
2. 关键字：关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。

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

3. 媒体特性：每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。 注意他们要加小括号包含
4. 媒体查询书写规则
注意：为了防止混乱，媒体查询我们要按照从小到大或者从大到小的顺序来写,但是我们最喜欢的还是从小到大来写，这样代码更简洁
eg：媒体查询改变背景颜色

 <style>/* 1. 媒体查询一般按照从大到小或者 从小到大的顺序来 *//* 2. 小于540px 页面的背景颜色变为粉色 */@media screen and (max-width: 539px) {body {background-color: pink;}}/* 3. 540 ~ 970 我们的页面颜色改为紫色 *//* @media screen and (min-width: 540px) and (max-width: 969px) {body {background-color: purple;}} */@media screen and (min-width: 540px) {body {background-color: purple;}}/* 4. 大于等于970 我们页面的颜色改为黄色 */@media screen and (min-width: 970px) {body {background-color: yellow;}}/* 5. screen 还有 and 必须带上不能省略的 *//* 6. 我们的数字后面必须跟单位  970px   这个 px 不能省略的 */
</style>

媒体查询（Media Query）相关推荐

移动开发—媒体查询(Media Query)
移动开发-媒体查询(Media Query) 1.使用@media,可以针对不同的媒体类型定义不同的样式 2.@media可以针对不同的屏幕尺寸设置不同的样式 3.当你重置浏览器大小的过程中,页面也会 ...
媒体查询@media query
@media query 媒体查询 @media (min-width:768px)小屏 (>=) @media (min-width:992px)中屏 @media (min-width:12 ...
媒体查询Media Query
媒体查询(Media Query)是CSS3新语法. @media 可以针对不同的屏幕尺寸设置不同的样式. 语法规范: @media mediatype and | not | only (media ...
css3的媒体查询(Media Queries)
css3的媒体查询(Media Queries) 我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 先看一个简单的例子: <link rel="stylesh ...
媒体查询(media)
目录媒体查询介绍 Media Queries具体使用一.最大宽度Max Width 二.最小宽度Min Width 三.多个Media Queries使用四.设备屏幕的输出宽度Device Wi ...
CSS3的媒体查询(Media Queries)与移动设备显示尺寸大全
文章目录媒体查询介绍 Media Queries具体使用一.最大宽度Max Width 二.最小宽度Min Width 三.多个Media Queries使用四.设备屏幕的输出宽度Device ...
html读取媒体长度,用媒体查询media根据屏幕分辨率大小确定网页宽度
显示网页的终端屏幕分辨率大小不一,为了能使同一网页能在不同的终端中合适显示,CSS3 推出了媒体查询media.用媒体查询media能根据屏幕分辨率大小确定网页宽度,这主要在 CSS 文件中根据屏幕分 ...
html5移动端开发(rem和媒体查询@media)
css下:index.css @charset "utf-8"; body,ol,ul,li,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fields ...
CSS3的媒体查询@media
CSS3的媒体查询@media 通过@media可以针对不同屏幕大小定义不同样式的网页,页面会根据浏览器长宽来渲染页面. 语法: @media mediaType and|not|only (medi ...
CSS媒体查询“@media”在调试中切换移动设备时不起作用。
今天在学习CSS响应式网页设计中的媒体查询,遇到个有趣的问题,主要就是在调试过程中切换移动设备和电脑,同样的代码将有不同的结果.在切换移动设备调试时@media对于"max-width=97 ...

媒体查询（Media Query）

媒体查询（Media Query）相关推荐

最新文章

热门文章