响应式布局——媒体查询media参数以及其兼容性问题

最新推荐文章于 2024-10-03 10:48:55 发布

Harriet嘉

最新推荐文章于 2024-10-03 10:48:55 发布

阅读量1.5k

点赞数

分类专栏：前端文章标签：响应式布局

前端专栏收录该内容

27 篇文章 1 订阅

订阅专栏

一、设置meta标签

在使用媒体查询media之前我们需要先设置meta标签，对设备的缩放等参数进行设定。

<!--设置缩放和绘制-->  
<meta name="viewport" content="width=device-width, initial-scale=1,minmum-scale=1,maxmum-scale=1,user-scalable=no">

参数解释：

width=device-width 宽度等于当前设备宽度

initial-scale=1初始缩放比例，默认为1

minmum-scale=1允许用户缩放到的最小比例，默认为1

maxmum-scale=1允许用户缩放到的最大比例，默认为1

user-scalabel=no用户是否可以手动缩放，默认设置为no 我们不希望用户缩放页面

二、加载IE兼容文件

因为IE8既不支持HTML5也不支持CSS3 Media，所以我们需要加载两个JS文件，来保证我们的代码实现兼容效果：

<!--加载meta IE兼容文件-->  
<!--[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:解决办法：

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

这句话的意思是将IE浏览器默认的渲染方式设为电脑上所装IE浏览器的最高标准，比如我电脑上装了IE10和IE8两个浏览器，如果我用IE8浏览器打开这个页面，会以IE10 的标准来渲染页面。

如果有的用户电脑里面装了这个chrome的插件，就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算，无比给力，不过如果用户没装这个插件，那这段代码就会让IE以最高的文档模式展现效果。

四、media 参数

width:浏览器可视宽度。
height:浏览器可视高度。
device-width:设备屏幕的宽度。
device-height:设备屏幕的高度。
orientation:检测设备目前处于横向还是纵向状态。
aspect-ratio:检测浏览器可视宽度和高度的比例。(例如：aspect-ratio:16/9)
device-aspect-ratio:检测设备的宽度和高度的比例。
color:检测颜色的位数。（例如：min-color:32就会检测设备是否拥有32位颜色）
color-index:检查设备颜色索引表中的颜色，他的值不能是负数。
monochrome:检测单色楨缓冲区域中的每个像素的位数。（这个太高级，估计咱很少会用的到）
resolution:检测屏幕或打印机的分辨率。(例如：min-resolution:300dpi或min-resolution:118dpcm)。

设置最大或最小的缩放宽度可以：

html, body {width: 100%;max-width: 960px;}

@media only screen and (max-width: 1024px) {
    html, body {width: 800px;}
}

@media only screen and (max-width: 800px) {
    html, body {width: 100%;min-width: 790px;}
}