CSS媒体查询的应用

来源:转载

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


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



MDN CSS媒体查询


媒体类型
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;
}
}

分享给朋友:
您可能感兴趣的文章:
随机阅读: