1、媒体查询介绍
使用 @media 查询,你可以针对不同的屏幕大小定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面,这对调试来说是一个极大的便利。
CSS 语法
@media mediaType and|not|only (media feature) { /*CSS-Code;*/ }
媒体类型(mediaType )
类型有很多,在这里不一一列出来了,只列出了常用的几个。
值 | 描述 |
---|---|
all | 用于所有设备 |
用于打印机和打印预览 | |
screen | 用于电脑屏幕,平板电脑,智能手机等。(最常用) |
speech | 应用于屏幕阅读器等发声设备 |
2、编写之前呢,有几个要准备的工作
准备工作1:设置Meta标签
首先我们在使用 @media 的时候需要先设置下面这段代码,来兼容移动设备的展示效果:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
准备工作2:加载兼容文件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]-->
准备工作3:设置IE渲染方式默认为最高(可选)
现在有很多人的IE浏览器都升级到IE9以上了,所以这个时候就有又很多诡异的事情发生了,例如现在是IE9的浏览器,但是浏览器的文档模式却是IE8 为了防止这种情况,我们需要下面这段代码来让IE的文档渲染模式永远都是最新的
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
这段代码后面加了一个chrome=1,如果用户的电脑里安装了 chrome,就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算,如果没有安装,就显示IE最新的渲染模式。
代码实例
a、如果文档宽度小于等于 300px 则应用花括号内的样式——修改body的背景颜色(background-color):
@media screen and (max-width: 300px) { body { background-color:lightblue; } }
从上面的代码可以看出,媒体类型是屏幕(screen),使用 一个 and 连接后面的媒体功能,这里写的是 max-width:300px ,也就是说,当屏幕的最大宽度 小于等于 300px 的时候,就应用花括号里面的样式。
b、当文档宽度大于等于300px 的时候显示的样式
@media screen and (min-width: 300px){ body { background-color:lightblue; } }
3、常用的尺寸
设置的常有:
@media screen and (min-width:1200px)
@media screen and (min-width:992px)
@media screen and (min-width:768px)
@media screen and (min-width:480px)
在设置时,需要注意先后顺序,不然后面的会覆盖前面的样式。
从最佳用户体验来看,材料化设计用户界面应该适应如下布局尺寸:480、600、840、960、1280、1440和1600dp(设备独立像素):
分界点(dp) |
手机/平板电脑竖屏 |
手机/平板电脑横屏 |
屏幕 |
列数 |
间隔宽度(dp) |
0 |
small handset |
超小 |
4 |
16 |
|
360 |
medium handset |
超小 |
4 |
16 |
|
400 |
large handset |
超小 |
4 |
16 |
|
480 |
large handset |
small handset |
超小 |
4 |
16 |
600 |
small tablet |
medium handset |
小 |
8 |
16/24* |
720 |
large tablet |
large handset |
小 |
8 |
16/24* |
840 |
large tablet |
large handset |
小 |
12 |
16/24* |
960 |
small tablet |
小 |
12 |
24 |
|
1024** |
large tablet |
中等 |
12 |
24 |
|
1280** |
large tablet |
中等 |
12 |
24 |
|
1440** |
大 |
12 |
24 |
||
1600** |
大 |
12 |
24 |
||
1920** |
超大 |
12 |
24 |
注:上述表格中,*号表示当设备最小宽度小于600时取值16dp。**表示在桌面系统中分界点要比所列值小16dp以适应Chrome浏览器的变化。