媒体查询漫谈——@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 ...
随机推荐
- 1.2成员变量+类变量+static关键字
成员变量和类变量的区别 由static修饰的变量称为静态变量,其实质上就是一个全局变量.如果某个内容是被所有对象所共享,那么该内容就应该用静态修饰:没有被静态修饰的内容,其实是属于对象的特殊描述. 不 ...
- Google advertiser api开发概述——批量处理
批处理 大多数服务都提供同步 API,要求您发出请求然后等待响应,但 BatchJobService 允许您对多项服务执行批量操作,而无需等待操作完成. 与各服务的特定 mutate 操作不同,Bat ...
- PowerDesigner使用方法入门学习
[转载:https://www.cnblogs.com/biehongli/p/6025954.html] 1:入门级使用PowerDesigner软件创建数据库(直接上图怎么创建,其他的概念知识可自 ...
- JavaScript深入
BOM(浏览器对象模型)——与浏览器对话: Window对象(代表浏览器的窗口——不包括工具栏.滚动条): //所有全局对象.全局函数,均自动成为window对象的成员(document属于浏览器,所 ...
- springboot集成logback日志
简介 spring boot内部使用Commons Logging来记录日志,但也保留外部接口可以让一些日志框架来进行实现,例如Java Util Logging,Log4J2还有Logback. 如 ...
- 基于 Python 和 Pandas 的数据分析(5) --- Concatenating and Appending
这一节我们将会介绍几种不同的合并数据的方法. 在我们这个不动产投资的例子中, 我们希望获取 51 个州的房产数据, 并把它们组合起来. 我们这样做有很多原因. 这样做既便于我们做分析, 同时也可以占用 ...
- CentOS6.5下搭建VNC服务器
VNC(Virtual Network Computing,虚拟网络计算机)是一款由AT&T欧洲研究实验室开发的远程控制软件,允许用户在网络的任何地方使用简单的程序来和一个特定的计算机进行交互 ...
- 1.0 poi单元格合合并及写入
最近项目中用到poi生成Excel时,用到了单元格合并,于是参考了http://www.anyrt.com/blog/list/poiexcel.html写的文章,但是其中有些地方不是很清楚,于是自己 ...
- STL——vector
学到STL的vector,发现手中的材料不是很详细,这里做个汇总. 1 操作 (1)头文件#include<vector>. (2)创建vector对象,vector<int> ...
- cmd中mvn命令,出现No compiler is provided in this environment. Perhaps you are running on a JRE rather than a JDK?
在cmd里执行mvn命令,出错 查看mvn -v 发现mvn运行在jre上,更改高级设置.我的电脑-->属性-->高级系统设置-->环境变量 更改完之后,再次查看 mvn -v 搞定 ...