CSS媒体查询的应用

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

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

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

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

MDN CSS媒体查询

媒体类型

  1. all 所有媒体
  2. braille 盲文触觉设备
  3. embossed 盲文打印机
  4. print 手持设备
  5. projection 打印预览
  6. screen 彩屏设备
  7. speech ‘听觉’类似的媒体类型
  8. tty 不适用像素的设备
  9. 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规范的表达式.

  • 表达式描述了媒体特征, 最终会被解析为 truefalse .
  • 如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型, 并且所有的表达式的值都是 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>

逻辑操作符

可以使用 notandonly 等逻辑操作符构建复杂的媒体查询。

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

若使用了 notonly 操作符,必须明确指定一个媒体类型。默认为 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;
 }

 }

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

查看所有标签

猜你喜欢:

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

技术元素

技术元素

[美] 凯文·凯利 / 张行舟、余倩、周峰、管策、金鑫、曾丹阳、李远、袁璐 / 译言·东西文库/电子工业出版社 / 2012-5 / 55.00元

我会将我不成熟的想法、笔记、内心争论、草稿以及对其他文章的回应都写在《技术元素》中,这样我就能知道自己到底在想些什么。——KK “技术元素”(technium)是凯文•凯利专门创造出来的词语。“技术元素不仅仅包括一些具象的技术(例如汽车、雷达和计算机等),它还包括文化、 法律、社会机构和所有的智能创造物。”简而言之,技术元素就是从人的意识中涌现出来的一切。KK把这种科技的延伸面看成一个能产生......一起来看看 《技术元素》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具