一、 响应式设计
响应式设计,设计可根据所显示的设备屏幕大小(视口宽度)而自动调节改变, 在不同的设备上呈现的会有所不同。按照可用的屏幕属性,响应式设计提供了 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背景色.