CSS3 媒介查询
2017-03-02 23:25
232 查看
一、 响应式设计
响应式设计,设计可根据所显示的设备屏幕大小(视口宽度)而自动调节改变, 在不同的设备上呈现的会有所不同。按照可用的屏幕属性,响应式设计提供了 UI 的最佳效果。例如,如果网站布局上有一个占据 25% 的屏幕宽度的侧边栏,那么该侧边栏在不同大小的屏幕上的呈现是不同的。该侧边栏在较大的桌面监控器上是宽屏的,在较小的 智能手机屏幕上是极其窄的。而在最高的或最小的屏幕上,侧边栏很可能不再是可用的 UI 组件。
有了媒体查询,我们就可以对所有可能的不同设备编写精准css代码,这样,UI设计就能根据设备的视口宽度自动的更样式,提供不同屏幕大小下的最佳 UI 体验。
二、媒介查询
2-1. 什么是媒体查询
媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color (等)。使用媒体查询,可以在不改变页面内容的情况下,为特定的一些输出设备定制显示效果。2-2. 为什么响应式设计需要,媒体查询
通过媒介查询就能针对不同的设备特性(视口的宽度)设置特定的CSS样式规则。2-3. 如何在CSS文件中引入媒体查询
媒介查询 写在CSS样式代码的最后,CSS中文名称即层叠样式表,即在同一特性下,靠后的的样式规则会覆盖掉前面的样式规则。设置Meta标签
首先需要在html文档中添加以下代码,用来兼容移动设备的显示效果<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
width=device-width: 宽度等于当前设备的宽度
initial-scale=1: 初始的缩放比例(默认为1)
maximum-scale=1: 允许用户缩放到得最大比例(默认为1)
user-scalable=no: 用户不能手动缩放
加载兼容JS文件
因为IE8既不支持HTML5也不支持CSS3 Media, 所以需要加载两个JS文件,来保证我们的代码实现兼容效果:<!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]-->
设置IE渲染方式默认为最高(可选择添加)
现在有很多人的IE浏览器都升级到IE9以上了,所以这个时候就有又很多诡异的事情发生了,例如现在是IE9的浏览器,但是浏览器的文档模式却是IE8:为了防止这种情况,我们需要下面这段代码来让IE的文档模式永远都是最新的:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
太给力了。
更好的写法:
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
怎么这段代码后面加了一个chrome=1,这个Google Chrome Frame(谷歌内嵌浏览器框架GCF),如果有的用户电脑里面装了这个chrome的插件,就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算,无比给力,不过如果用户没装这个插件,那这段代码就会让IE以最高的文档模式展现效果。这段代码我还是建议你们用上,不过不用也是可以的。
写CSS3媒体查询
例:@media screen and (max-width:720px) and (min-width:320px){ body{ background-color: #CCCCCC; } } @media screen and (max-width:320px){ body{ background-color: #FFFFFF; } }
上面代码的意思是,当屏幕宽度在320px~720px之间时,媒体查询中body的背景色(background-color: #CCCCCC;), 这个背景色的设置优先级高于之前的。当屏幕宽度在小于320px时,媒体查询中body的body背景色(background-color: #FFFFFF;)会重叠之前的body背景色.
推荐阅读:
菜鸟教程:CSS3 @media 查询使用 CSS 媒体查询创建响应式网站
使用 CSS 媒体查询创建响应式网站
相关文章推荐
- 简单地响应式布局----CSS3中的Media Query(媒介查询)
- Html+Css_CSS3_CSS2 响应式布局 Media query(媒介查询)
- css3媒介查询使用规则小结
- 响应式设计中相关尺寸css3媒介查询
- CSS3媒介查询
- CSS3媒体查询
- CSS3 @media 查询
- css3的媒体查询(Media Queries)
- css3媒体查询实现网站响应式布局
- css3媒体查询
- 强悍的css3媒体查询打印页面
- 响应式布局基本实现Media Query(媒介查询)
- 有关CSS3中的media媒体查询
- CSS3 Media Query 响应式媒体查询
- css3的@media媒体查询
- css3 media媒体查询
- CSS3 - 媒体查询解析
- css3 media媒体查询
- CSS3:媒体查询
- 揭开CSS3媒体查询迷雾(min-width和max-width)