CSS媒体查询的应用

栏目: CSS · 发布时间: 6年前

内容简介：CSS媒体查询的应用

在CSS3中添加的媒体查询，允许内容的呈现针对一个特定范围的输出设备而定制，而不必改变内容本身。

Media Queries能在不同的条件下使用不同的样式，使用页面达到不同的渲染效果。

媒体类型

all 所有媒体
braille 盲文触觉设备
embossed 盲文打印机
print 手持设备
projection 打印预览
screen 彩屏设备
speech ‘听觉’类似的媒体类型
tty 不适用像素的设备
tv 电视

@media screen {
 p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print {
 p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print {
 p.test {font-weight:bold;}
}

/*移动端样式*/
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
 /* Styles */
}

sans - serif 字体比较适合在屏幕上阅读，而 serif 字体更容易在纸上阅读。

媒体查询包含一个可选的媒体类型和零个或多个满足CSS3规范的表达式.

表达式描述了媒体特征, 最终会被解析为 true 或 false .
如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型, 并且所有的表达式的值都是 true , 那么该媒体查询的结果为 true

<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- 样式表中的CSS媒体查询 -->
<style> 
@media (max-width: 600px) {
 .facet_sidebar {
 display: none;
 }
}
</style>

逻辑操作符

可以使用 not ， and 和 only 等逻辑操作符构建复杂的媒体查询。

and 操作符用来把多个媒体属性组合成一条媒体查询。只有当每个属性都为真时，结果才为真。
not 操作符用来对一条媒体查询的结果进行取反。
only 操作符表示仅在媒体查询匹配成功的情况下应用指定样式。

若使用了 not 或 only 操作符，必须明确指定一个媒体类型。默认为 all 所有媒体类型。

and 用于合并多个媒体属性或合并媒体属性与媒体类型

@media (min-width: 700px) and (orientation: landscape) { ... }
@media tv and (min-width: 700px) and (orientation: landscape) { ... }
/* 逗号分隔相当于or操作符 */
@media (min-width: 700px), handheld and (orientation: landscape) { ... }

not 用来排除某种制定的媒体类型，换句话来说就是用于排除符合表达式的设备

<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" />

only 仅在媒体查询匹配成功的情况下应用指定样式

<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />

语法

@media mediatype and | not | only (media feature) { css-code; }

常用媒体属性

设备宽度：device-width | min-device-width | max-device-width
设备高度：device-height | min-device-height | max-device-height
设备宽度比：device-aspect-ratio: 16/9
设备方向：orientation: portrait / landscape
设备输出分辩率：min-resolution: 300dpi | min-resolution: 2dppx
屏幕像素比：min-device-pixel-ratio: 2 | min–moz-device-pixel-ratio | -webkit-min-device-pixel-ratio
渲染区域的宽度： width | min-width | max-width
渲染区域的高度： height | min-height | max-height

设备输出分辩率(打印分辩率)：dpi, dpcm, dppx

指定输出设备的分辨率（像素密度）。分辨率可以用每英寸（dpi）或每厘米（dpcm）的点数来表示。

每英寸包含点的数量（dots per inch）

普通屏幕通常包含96dpi，一般将2倍于此的屏幕称之为高分屏，即大于等于192dpi的屏幕，比如Mac视网膜屏就达到了192dpi（即2dppx），打印时一般会需要更大的dpi；

1dppx = 96dpi

1dpi ≈ 0.39dpcm

1dpcm ≈ 2.54dpi

分辨率PPI与DPI

Media query只接受单个的逻辑表达式作为其值或者没有值

Media Query其中的大部分接受min/max前缀，用来表示其逻辑关系，表示应用于大于等于或者小于等于某个值的情况著作权归作者

横竖屏的判断

@media (orientation : landscape){ /* 横屏 */ }
@media (orientation : portrait){ /* 竖屏 */ }

注意部分 Android 中有bug

当输入框获得焦点，触发弹出键盘后，横屏的样式出现了，然而他使用的是竖屏，并未把手机横过来。

添加宽度限制，屏幕宽度大于450px时，并且是横屏时，应用横屏样式

@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape){
// CSS Style
}

@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait){
// CSS Style
}

高清图片适配

在普通屏下使用@1x图片，在高清屏下使用@2x图片

/* 普通显示屏(设备像素比例小于等于1.3)使用1倍的图 */
.bg{
 background-image:url(img_1x.png);
}
/* 高清显示屏(设备像素比例大于等于1.5)使用2倍图 */

@media
 only screenand(-webkit-min-device-pixel-ratio: 1.25),
 only screenand(min-resolution: 120dpi),
 only screenand(min-resolution: 1.25dppx){
ratio:1.5){
 .bg{
 background-image:url(img_2x.png);
 }
 }

屏幕适配

移动端配合 rem 使用，适配不同宽度的屏幕

html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}

适配独立的样式文件

<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

设备判断

@media screen and (device-aspect-ratio: 40/71) {}
或者：
@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){}

调整模块的样式

@media screen and (max-width: 980px) {

 #pagewrap {
 width: 95%;
 }

 #content {
 width: 60%;
 padding: 3% 4%;
 }

 #sidebar {
 width: 30%;
 }
 #sidebar .widget {
 padding: 8% 7%;
 margin-bottom: 10px;
 }

 }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

CSS高效开发实战—CSS 3、LESS、SASS、Bootstrap、Foundation

谢郁 / 电子工业出版社 / 2014-9 / 59.00

想象一下，一个网页只有HTML，没有CSS，那就是素颜和上妆的区别。而一个网页只有CSS，没用CSS 3，那就是马车和汽车的区别！汽车代表的是高效、美观，CSS 3的意图也是如此。移动设备的流行导致了响应式设计的流行，而CSS 3正是实现这种设计的精髓。《CSS高效开发实战—CSS 3、LESS、SASS、Bootstrap、Foundation》围绕的就是如何跨浏览器、跨设备进行高效率的CSS开......一起来看看《CSS高效开发实战—CSS 3、LESS、SASS、Bootstrap、Foundation》这本书的介绍吧!

码农工具