1.什么是媒体查询？

以我个人的理解来说，媒体查询就是监听实时监听页面的宽度，当达到媒体查询设置的条件时，用设置在媒体查询中的css样式代替该元素之前设置的样式(当然，如果该元素之前没有设置css样式的画，是添加上新样式)；

因为通过使用的媒体类型都是screen媒体类型；所以下面的这个问题就是探讨一下媒体查询的本质；

那么就有一个疑问啦？css中的媒体查询与js中的window,onresize有什么区别吗?

以本人理解，没有区别；只不过在js中设置window,onresize事件，然后通过if判断window.innerWidth是值然后在if的块级作用域中写css样式自然没有直接在css中写来的方便；

再换句话说：媒体查询是不是就可以理解为在css中设置了window,onresize事件和if判断；

2.媒体查询的具体使用方法

@media 媒体类型 and (媒体查询的特性/条件){ } 媒体查询的基本格式

screen：

@media screen and (max-width:800px){ } 当页面小于800px时候，使用该媒体查询中的样式；

@media screen and (min-width:1200px){ } 当页大于面于1200px时候，使用该媒体查询中的样式；

简化后：

@media (max-width:800px){ } 当页面宽度与小于800px时候，使用该媒体查询中的样式；

@media (min-width:1200px){ } 当页面宽大于1200px时候，使用该媒体查询中的样式；

也可以使用引用外部的css文件也使用媒体查询：

3.媒体查询的demo

当页面宽度小于700，div的颜色是red；大于700小于1200，div的颜色是aqua(其实本质还是当页面宽度与大于1200，这个样式被覆盖了)；当页面宽度大于700，div的颜色是red；

div{width:500px;height:500px;background-color: red;
}
@media (min-width:700px){div{background-color: aqua;}
@media (min-width:1200px){div{background-color: yellowgreen;}
}

注意html是从上往下读取css样式的,所以呈现的样式就是：

当页面宽度小于700，div的颜色是red；大于700，div的颜色是aqua；

div{width:500px;height:500px;background-color: red;
}
// 该条件一直不会执行 因为当满足大于1200宽度时候必定满足下面的条件；
@media (min-width:1200px){div{background-color: yellowgreen;}
}
// 当页面宽度大于1200之后，该设置的条件将覆盖上面的样式；
@media (min-width:700px){div{background-color: aqua;}
}

媒体查询(media)-screen相关推荐

html读取媒体长度,用媒体查询media根据屏幕分辨率大小确定网页宽度
显示网页的终端屏幕分辨率大小不一,为了能使同一网页能在不同的终端中合适显示,CSS3 推出了媒体查询media.用媒体查询media能根据屏幕分辨率大小确定网页宽度,这主要在 CSS 文件中根据屏幕分 ...
移动开发—媒体查询(Media Query)
移动开发-媒体查询(Media Query) 1.使用@media,可以针对不同的媒体类型定义不同的样式 2.@media可以针对不同的屏幕尺寸设置不同的样式 3.当你重置浏览器大小的过程中,页面也会 ...
css3的媒体查询(Media Queries)
css3的媒体查询(Media Queries) 我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 先看一个简单的例子: <link rel="stylesh ...
CSS3的媒体查询@media
CSS3的媒体查询@media 通过@media可以针对不同屏幕大小定义不同样式的网页,页面会根据浏览器长宽来渲染页面. 语法: @media mediaType and|not|only (medi ...
CSS媒体查询“@media”在调试中切换移动设备时不起作用。
今天在学习CSS响应式网页设计中的媒体查询,遇到个有趣的问题,主要就是在调试过程中切换移动设备和电脑,同样的代码将有不同的结果.在切换移动设备调试时@media对于"max-width=97 ...
媒体查询(@media语法、案例)详解
媒体查询 @media 语法 1. 直接写在 CSS 样式中 2. 针对不同的媒体设备,从外部链入不同的 stylesheets(外部样式表) 使用 @media 实现网页变色龙 @media 语法 ...
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 ...
媒体查询@media query
@media query 媒体查询 @media (min-width:768px)小屏 (>=) @media (min-width:992px)中屏 @media (min-width:12 ...
移动端zepot媒体查询media queries
使用zepot做轮播图 <head> <meta charset="utf-8"> <meta name="viewport" c ...

媒体查询(media)-screen

1.什么是媒体查询？

2.媒体查询的具体使用方法

媒体查询(media)-screen相关推荐

最新文章

热门文章