媒体查询漫谈——@media Queries
通过不同的媒体类型和条件定义样式表规则。媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受min
和max
用于表达”大于或等于”和”小与或等于”。如:width会有min-width
和max-width
媒体查询可以被用在CSS中的@media
和@import
规则上,也可以被用在HTML和XML中。通过这个标签属性,我们可以很方便的在不同的设备下实现丰富的界面,特别是移动设备,将会运用更加的广泛。
media query能够获取的值有:
- 设备的宽和高device-width,device-heigth显示屏幕/触觉设备。
- 渲染窗口的宽和高width,heigth显示屏幕/触觉设备。
- 设备的手持方向,横向还是竖向orientation(portrait|lanscape)和打印机等。
- 画面比例aspect-ratio点阵打印机等。
- 设备比例device-aspect-ratio-点阵打印机等。
- 对象颜色或颜色列表color,color-index显示屏幕。
- 设备的分辨率resolution。
语法结构及用法:
@media 设备名 only (选取条件) not (选取条件) and(设备选取条件),设备二{rules} 在link中使用@media:
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px),only screen and (max-device-width: 480px)" href="link.css" rel="external nofollow" />
上面使用中only可省略,限定于计算机显示器,第一个条件max-width
是指渲染界面最大宽度,第二个条件max-device-width
是指设备最大宽度。 在样式表中内嵌@media:
@media (min-device-width:1024px) and (max-width:989px),screen and (max-device-width:480px),(max-device-width:480px) and (orientation:landscape),(min-device-width:480px) and (max-device-width:1024px) and (orientation:portrait) {rules} 在以上例子中,设置了电脑显示器分辨率(宽度)大于或等于1024px(并且最大可见宽度为989px);屏宽在480px及其以下手持设备;屏宽在480px以及横向(即480尺寸平行于地面)放置的手持设备;屏宽大于或等于480px小于1024px以及垂直放置设备的css样式。 从上面的例子可以看出,字符间以空格相连,选取条件包含在小括号内,rules
为兼容设置的样式表,包含在中括号里面。only
(限定某种设备,可省略),and
(逻辑与),not
(排除某种设备)为逻辑关键字,多种设备用逗号分隔,这一点继承了css基本语法。
可用设备名参数:
逻辑关键字:
可用设备名参数:
往往我们还有配合一些css的初始设置:
/* 禁用iPhone中Safari的字号自动调整 */
html {
-webkit-text-size-adjust: none;
}
/* 设置HTML5元素为块 */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
/* 设置图片视频等自适应调整 */
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
.video embed, .video object, .video iframe {
width: 100%;
height: auto;
}
一定记得在head标签中加上<meta name="viewport" content="width=device-width; initial-scale=1.0">
meta viewport
这个属性是在移动设备上设置原始大小显示和是否缩放的声明
参数设置∶
- width – viewport的宽度
- height – viewport的高度
- initial-scale – 初始的缩放比例
- minimum-scale – 允许用户缩放到的最小比例
- maximum-scale – 允许用户缩放到的最大比例
- user-scalable – 用户是否可以手动缩放
最后对于在IE浏览器中不支持media query
的情况,我们可以使用Media Query JavaScript
来解决,只需要在页面头部引用css3-mediaqueries.js
即可。示例:
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js">
</script> <![endif]--> 摘抄自觉唯网。
媒体查询漫谈——@media Queries的更多相关文章
- 移动设备上的媒体查询 CSS media queries for mobile device
CSS的媒体查询虽然在传统的互联网页面可能发挥的余地不是很大,但是自从苹果和安卓的风靡之后,移动平台上的web开发变得越来越流行了,同时CSS的媒体查询可谓派上了大用场了. 以下为翻译内容,原文来自这 ...
- CSS3媒体查询(Media Queries)
媒体类型: all 所有设备 screen 电脑显示器 handheld 便携设备 tv 电视类型设备 print 打印用纸打印预览视图 关键字 and not(排除某种设备) only(限定某种设备 ...
- 解决ie9以下下不支持html5和媒体查询(Media Queries)
ie9以下不支持媒体查询和html5,可以使用补丁完美兼容 1.html5shiv ie6~8不识别html5的新元素,可以通过使用html5shiv来解决 <!--[if lt IE 9]&g ...
- 关于响应式、媒体查询和media的关系 、流媒体布局flex 和em rem像素的使用 我有一些废话要讲.....
一.什么是响应式 随着移动端越来遇火 网站的布局成为一个热议的话题 有的人喜欢用手机浏览网站.有的人喜欢用paid浏览网站.有人喜欢用电脑浏览网站 那么问题来了 我们怎么样才能使用一套css样式 完成 ...
- media query(媒体查询)和media type(媒体类型)
media type(媒体类型)是css 2中的一个非常有用的属性,通过media type我们可以对不同的设备指定特定的样式,从而实现更丰富的界面.media query(媒体查询)是对media ...
- 媒体查询(media):设置PC端网页居中显示
@media screen and (min-width: 768px){ body{ background-color: #EAEAEA; } #fater{ width: 640px; margi ...
- css3的媒体查询(Media Queries)
我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 先看一个简单的例子: <link rel="stylesheet" media="scr ...
- media queries 媒体查询使用
media queries 翻译过来就是媒体查询,media 指的媒体类型.那么有哪些类型呢,常用的有 screen(屏幕).打印(print),个人理解就是它所在的不同终端. 常用的用法:1,< ...
- 媒体查询Media Queries详解
@media 标签可以说是响应式网页的开发基础.其主要由媒体类型(Media Type)和 媒体特性(Media Query)两部分组成. Media Type 设定后面规则生效的展示类型,包括all ...
随机推荐
- LuoguP3948 数据结构
题目地址 题目链接 题解 以为这题虽然是数据随机也不至于那么水吧... 于是秉着先打部分分和暴力的原则先写了暴力和min,max为-inf和inf的特殊点,对于暴力搞了个小优化,延后的操作直接前缀和答 ...
- Tutorials on training the Skip-thoughts vectors for features extraction of sentence.
Tutorials on training the Skip-thoughts vectors for features extraction of sentence. 1. Send emails ...
- javascript知识体系
JAVASCRIPT 篇 0.基础语法 javascript基础语法包括:变量定义.数据类型.循环.选择.内置对象等. 数据类型有string,number,boolean,null,undefine ...
- android activity全屏
有两种方法: 1.在AndroidManifest.xml的配置文件里面的<activity>标签添加属性: android:theme="@android:style/Them ...
- Android 4.0之后的日历控件拥挤的解决办法
本意是想做成这个样子的控件: 发现使用datepicker之后,效果完全不同,把整个日历都显示出来了.非常拥挤. 在datepicker中加入android:calendarViewShown=&qu ...
- 更新:在MAC上安装RN开发环境的步骤(全)
总共分为三部: 1:按照官网(中文)上的步骤去安装jdk和android studio 2:配置SDK 3:安装虚拟机和模拟器 所以这里提出的是注意事项: 1:~/.bash_profile 文件里面 ...
- 大整数加法 HDU1002
今天早上没事干又把这个敲了一遍,虽然手冻得不行,不过又深入理解理解还可以哈. 难点就在给你的整数可能很大很长,所以long long 肯定不行,得用字符串来读取存储,然后注意一下相加的时候进位,最后输 ...
- es6中export和export default的区别
export与export default均可用于导出常量.函数.文件.模块 你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够对其进行使用 ...
- Java 多线程 fork-join
fork-join我们可以理解为分而治之,就是说当一个任务非常大的时候,我们可以按照一定的业务需求拆分为若干个小的任务,最后把这些小的任务再聚合起来. 下面就通过fork-join实现一个从1加到10 ...
- 日常英语---十二、MapleStory/Monsters/Level 1-10(Horny Mushroom)
日常英语---十二.MapleStory/Monsters/Level 1-10(Horny Mushroom) 一.总结 一句话总结: horny-['hɔːnɪ]-adj.角的 Another m ...