CSS3的媒体查询@media

通过@media可以针对不同屏幕大小定义不同样式的网页，页面会根据浏览器长宽来渲染页面。
语法：

@media mediaType and|not|only (media feature) {/*CSS-Code;*/
}

and|not|only:and放在mediaType后，连接属性，代表将多个media feature结合在一起；
not否定，放在@media后，代表对该条信息取反；
only代表仅仅，一般放在@media后，例如：@media only screen，代表仅仅针对彩色屏幕有效；

mediaType:媒体类型，：all所有屏幕;screen 用于电脑屏幕，平板电脑，智能手机等;print 用于打印机和打印预览;speech 应用于屏幕阅读器等发声设备
media feature:媒体功能,max-width:页面最大宽度，min-width:页面最小宽度
在使用媒体查询前面，首先要设置meta标签，其次要加载兼容文件js,设置ie渲染为最高；
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<!--[if lt IE 9]><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

注意：
1. 一般引入第一条meta标签就可以使用
2. and|not|only (media feature)注意啦and和(media feature)之间有一个空格！！！

示例：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>媒体查询</title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"><style type="text/css">*{padding: 0;margin: 0;}/*屏幕宽度大于800px*/@media screen and (min-width: 800px){.box{width:200px;height: 300px;background-color: red;}}/*屏幕宽度在500-800之间*/@media screen and (min-width: 500px) and (max-width: 800px){.box{width:200px;height: 300px;background-color: yellow;}}/*屏幕宽度小于500之间*/@media screen and (max-width: 500px){.box{width:200px;height: 300px;background-color: green;}}</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>

注意：
max-width代表页面不大于该宽度时，满足该条件
min-width：代表页面不小于该宽度时，满足该条件

CSS3的媒体查询@media相关推荐

css3的媒体查询(Media Queries)
css3的媒体查询(Media Queries) 我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 先看一个简单的例子: <link rel="stylesh ...
CSS3的媒体查询(Media Queries)与移动设备显示尺寸大全
文章目录媒体查询介绍 Media Queries具体使用一.最大宽度Max Width 二.最小宽度Min Width 三.多个Media Queries使用四.设备屏幕的输出宽度Device ...
CSS3之媒体查询 - @media
目录一.媒体查询简介二.媒体类型查询三.媒体参数查询 1. aspect-ratio 2. color 3. color-index 4. width.height 5. grid 6. mon ...
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 ...
媒体查询@media query
@media query 媒体查询 @media (min-width:768px)小屏 (>=) @media (min-width:992px)中屏 @media (min-width:12 ...
移动开发—媒体查询(Media Query)
移动开发-媒体查询(Media Query) 1.使用@media,可以针对不同的媒体类型定义不同的样式 2.@media可以针对不同的屏幕尺寸设置不同的样式 3.当你重置浏览器大小的过程中,页面也会 ...
CSS媒体查询“@media”在调试中切换移动设备时不起作用。
今天在学习CSS响应式网页设计中的媒体查询,遇到个有趣的问题,主要就是在调试过程中切换移动设备和电脑,同样的代码将有不同的结果.在切换移动设备调试时@media对于"max-width=97 ...
媒体查询(@media语法、案例)详解
媒体查询 @media 语法 1. 直接写在 CSS 样式中 2. 针对不同的媒体设备,从外部链入不同的 stylesheets(外部样式表) 使用 @media 实现网页变色龙 @media 语法 ...

CSS3的媒体查询@media

CSS3的媒体查询@media

CSS3的媒体查询@media相关推荐

最新文章

热门文章