CSS @media 查询

@media 查询，用于针对不同的媒体类型定义不同的样式。

@media 的css3版本的浏览器支持：

css语法：
@media 媒体类型 and|not|only (媒体功能) { css样式代码 }

html中针对不同的媒体使用不同样式：
<link rel="stylesheet" media="媒体类型 and|not|only (媒体功能)" href="test.css">

not 用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。
only 用来定某种特别的媒体类型。在支持媒体查询的设备中没有实际作用。

媒体类型：

值	描述
all	用于所有设备。
print	用于打印机和打印预览。
screen	用于电脑屏幕，平板电脑，智能手机等。
speech	应用于屏幕阅读器等发声设备。

CSS3中废弃的类型：aural，braille，embossed，handheld，projection，tty，tv

/*在屏幕中显示时字体*/
@media screen{p{font-family:verdana,sans-serif;font-size:14px;}
}
/*打印时显示时字体*/
@media print{p{font-family:times,serif;font-size:10px;}
}
/*在屏幕中和打印时都为粗体*/
@media screen,print{p{font-weight:bold;}
}
/*非打印时*/
@media not print{p{font-weight:400;}
}

媒体功能：

值	描述
height	页面可见区域高度。
width	页面可见区域宽度。
min-height	页面最小可见区域高度。
min-width	页面最小可见区域宽度。
max-height	页面最大可见区域高度。
max-width	页面最大可见区域宽度。
device-width	屏幕可见宽度。
device-height	屏幕可见高度。
min-device-width	屏幕最小可见宽度。
min-device-height	屏幕的最小可见高度。
max-device-height	屏幕可见的最大高度。
max-device-width	屏幕最大可见宽度。
orientation	页面可见区域高度是否大于或等于宽度。值:`portrait\|landscape`
resolution	设备的分辨率。如：96dpi, 300dpi, 118dpcm。
min-resolution	设备的最小分辨率。
max-resolution	设备的最大分辨率。
aspect-ratio	页面可见区域宽度与高度的比率
min-aspect-ratio	页面可见区域宽度与高度的最小比率。
max-aspect-ratio	页面可见区域宽度与高度的最大比率。
device-aspect-ratio	屏幕可见宽度与高度的比率。
min-device-aspect-ratio	屏幕可见宽度与高度的最小比率。
max-device-aspect-ratio	屏幕可见宽度与高度的最大比率。
color	定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0。
min-color	定义输出设备每一组彩色原件的最小个数。
max-color	定义输出设备每一组彩色原件的最大个数。
color-index	定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0
min-color-index	定义在输出设备的彩色查询表中的最小条目数。
max-color-index	定义在输出设备的彩色查询表中的最大条目数。
monochrome	定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0
min-monochrome	定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
max-monochrome	定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。
scan	定义电视类设备的扫描工序。`progressive`连续扫描，`interlace`交织扫描。
grid	用来查询输出设备是否使用栅格或点阵。`1`代表是，`0`代表否。

例：在不同屏幕宽度时显示不同样式

/*当屏幕宽在 screen <= 200px 时，box的背景色是绿色, 其中 only 可以省略*/
@media only screen and (max-width: 200px) {.box{ background:green;}
}
/*当屏幕宽等于 400px 时，box的边框颜色是蓝色 */
@media screen and (width: 400px) {.box{ border-color:blue; }
}
/*当屏幕宽等于 400px 或 450px 时，box的边框颜色是蓝色 */
@media screen and (width: 400px),(width: 450px) {.box{ border-color:blue; }
}/*当屏幕宽在 300px<= screen <=400px 之间时，box的背景色是红色 */
@media screen and (min-width: 300px) and (max-width: 400px) {    .box{ background:red; }
}
/*当屏幕宽 sreen >= 500px 时，box的背景色是粉色 */
@media screen and (min-width: 500px) {.box{ background:pink; }
}
/*在桌面电脑屏幕中 box 宽度25%*/
@media only screen and (max-width: 1200px) {.box{ width: 25%;}
}
/*在平板电脑屏幕中 box 宽度50%*/
@media only screen and (max-width: 992px) {.box{ width: 50%;}
}
/*在手机屏幕中 box 宽度100%*/
@media only screen and (max-width: 768px) {.box{ width: 100%;}
}

@media screen and (orientation:portrait) {/*若是手机，则手机横向时*/
}
@media screen and (min-resolution:300dpi) {/*设备分辨率大于等于 300dpi 时*/
}
@media screen and (aspect-ratio:16/9) {/*页面可见区域宽度与高度比为 16/9 时*/
}
@media screen and (min-color: 32) {/*检测设备拥有32位颜色时*/
}
@media tv and (scan:progressive){body{color:#f00;}
}

例：打印时隐藏不需要打印的内容，并设置打印内容样式

@media print{.box{ display:none; }.printBox{padding:20px;font-weight:bold;color:red;}
}

CSS @media 查询相关推荐

CSS Media媒体查询
媒介类型在CSS2中,媒体查询只使用于<style>和<link>标签中,以media属性存在 media属性用于为不同的媒介类型规定不同的样式 screen 计算机屏幕(默 ...
深入理解CSS Media媒体查询
前面的话一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了媒体属性和使用场景(IE8-浏览器不支持).本文将详细介绍媒体查 ...
前端CSS @media 媒体查询PC端
前端CSS @media 媒体查询PC端注意and后面跟一个空格 @media screen and (min-width: 1024px){body{font-size: 12px} } /*&g ...
media覆盖了css,为什么我的CSS媒体查询被忽略或覆盖？
这让我发疯!我看了一些关于Stackoverflow的问题,发现ID元素的优先级高于类元素(这很高兴知道,但是我感觉这不是我的问题).这是我苦苦挣扎的NAVIGATION菜单.(我使用最大宽度顺便说一 ...
CSS 媒体查询@media 适配 iPhone 6/7/8、iPhone 6/7/8 Plus、 iPhone X和ipad横竖屏
<style lang="less" rel="stylesheet/less" type="text/less" scoped> ...
css媒体查询（手机、平板、PC）
List item css媒体查询 PC端按屏幕尺寸整理? 通过上面的电脑屏蔽及尺寸的例表上我们得到了几个宽度 1024 1280 1366 1440 1680 1920 超小屏幕手机 (<7 ...
响应式开发中合理选定CSS媒体查询分割点
本文响应式开发中合理选定CSS媒体查询分割点翻译自David Gilbertson的The-100%-Correct-Way-To-Do-CSS-breakpoints一文.本文唔看上去有些拗口,不过 ...
CSS media queries
最近在做一些页面打印时的特殊处理接触到了media queries,想系统学习一下,在MOZILLA DEVELOPER NETWORK看到一篇文章讲的很不错,结合自己的使用总结一下. CSS2/me ...
使用CSS 媒体查询功能满足不同屏幕分辨率要求
http://www.adobe.com/cn/devnet/dreamweaver/articles/dw_html5_pt3.html 这是探索Dreamweaver CS5.5的HTML5和CS ...

CSS @media 查询

CSS @media 查询相关推荐

最新文章

热门文章