内容简介: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
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; } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 县级融媒体中心建设规范解读与应用
- android音视频指南-媒体应用架构概述
- Ampache 4.4.3 发布,多媒体应用与文件管理器
- 开源多媒体应用 VLC 将新款华为手机加入禁止安装黑名单
- Waifu2x-Extension-GUI v2.59.15 发布,机器学习多媒体处理应用
- Waifu2x-Extension-GUI v2.62.13 发布,机器学习多媒体处理应用
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
技术元素
[美] 凯文·凯利 / 张行舟、余倩、周峰、管策、金鑫、曾丹阳、李远、袁璐 / 译言·东西文库/电子工业出版社 / 2012-5 / 55.00元
我会将我不成熟的想法、笔记、内心争论、草稿以及对其他文章的回应都写在《技术元素》中,这样我就能知道自己到底在想些什么。——KK “技术元素”(technium)是凯文•凯利专门创造出来的词语。“技术元素不仅仅包括一些具象的技术(例如汽车、雷达和计算机等),它还包括文化、 法律、社会机构和所有的智能创造物。”简而言之,技术元素就是从人的意识中涌现出来的一切。KK把这种科技的延伸面看成一个能产生......一起来看看 《技术元素》 这本书的介绍吧!