媒体查询media参数以及其兼容性问题
来源:互联网 发布:siesta软件是啥 编辑:程序博客网 时间:2024/05/16 15:11
一、设置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)。
grid:检测输出的设备是网格的还是位图设备。
部分参考来自:点击打开链接
0 0
- 媒体查询media参数以及其兼容性问题
- Media Queries媒体查询
- 媒体查询media
- Media Query媒体查询
- CSS3媒体查询media
- 媒体查询 @Media
- @media媒体查询
- Media 媒体查询
- CSS3--媒体查询@media
- CSS Media媒体查询
- CSS Media媒体查询
- css3 media媒体查询
- css媒体查询 @media
- @media 媒体查询
- @media 媒体查询
- 媒体查询@media
- media媒体查询
- 媒体查询(@media)
- HDU 4027 Can you answer these queries?(线段树)
- JavaScript入门(下篇)
- 获取json 对象属性和值
- html5跨域通信
- 【Writeup】2015NSCTF
- 媒体查询media参数以及其兼容性问题
- Nginx出现413 Request Entity Too Large错误解决方法,phpmyadmin导入mysql数据库提示,您想上传更大的文件/您可能想上传更大的文件的解决方法
- POJ-3735-Training little cats-构造矩阵+矩阵快速幂+稀疏矩阵乘法优化
- JDBC性能小贴
- 超酷算法:用四叉树和希尔伯特曲线做空间索引
- 关于camera 构架设计的一点看法
- Teradata各种类型Show 语句
- SetFilePointer设置文件指针使用示例(可用于读取大文件!!!)
- app集成微信支付服务器端开发(java)