当前位置:Gxlcms > html代码 > 有关对CSS3媒体查询知识的总结

有关对CSS3媒体查询知识的总结

时间:2021-07-01 10:21:17 帮助过:7人阅读

1、什么是媒体查询

媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color (等)。使用媒体查询,可以在不改变页面内容的情况下,为特定的一些输出设备定制显示效果。

2、为什么响应式设计需要,媒体查询
如果没有CSS3的媒体查询模块,就不能针对设备特性(如视口宽度)设置特定的CSS样式

3、如何在CSS文件中引入媒体查询

媒体查询写在CSS样式代码的最后,CSS是层叠样式表,在同一特殊性下,靠后的的样式会重叠前面的样式

4、怎样使用media

准备工作1:设置Meta标签

首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果:

  1. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

这段代码的几个参数解释:

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

  • initial-scale:初始的缩放比例(默认设置为1.0)

  • minimum-scale:允许用户缩放到的最小比例(默认设置为1.0)

  • maximum-scale:允许用户缩放到的最大比例(默认设置为1.0)

  • user-scalable:用户是否可以手动缩放(默认设置为no,因为我们不希望用户放大缩小页面)

准备工作2:加载兼容文件JS

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

  1. <!--[if lt IE 9]>

  2. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js?1.1.11"></script>

  3. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js?1.1.11"></script>

  4. <![endif]-->

准备工作3:设置IE渲染方式默认为最高(这部分可以选择添加也可以不添加)

现在有很多人的IE浏览器都升级到IE9以上了,所以这个时候就有又很多诡异的事情发生了,例如现在是IE9的浏览器,但是浏览器的文档模式却是IE8:

为了防止这种情况,我们需要下面这段代码来让IE的文档模式永远都是最新的:

  1. <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

这段代码后面加了一个chrome=1,这个Google Chrome Frame(谷歌内嵌浏览器框架GCF),如果有的用户电脑里面装了这个chrome的插件,就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算,无比给力,不过如果用户没装这个插件,那这段代码就会让IE以最高的文档模式展现效果。这段代码我还是建议你们用上,不过不用也是可以的。

二、怎样在CSS文件中写CSS响应式媒体查询

例: 根据不同宽度样式改变

HTML:

<ul>
<li>John Doe</li>
<li>Mary Moe</li>
<li>Amanda Panda</li>
</ul>
CSS:
//宽度小于500像素
@media screen and (max-width:500px) {
ul>li {
background: blue;
color: #fff;
font-size: 12px;
}
}
//宽度在500-700像素
@media screen and (max-width:700px) and (min-width:501px) {
ul>li {
background: goldenrod;
color: #000;
font-size: 16px;
}
}
//宽度在700-1000像素
@media screen and (max-width:1000px) and (min-width:701px) {
ul>li {
background: plum;
color: #000;
font-size: 20px;
}
}
//宽度大于1000像素
@media screen and (min-width:1001px) {
ul>li {
background: violet;
color: #333;
font-size: 22px;
}
}
//样式结束

In a word, @media 有三大要点:

1,meta 标签;

2,兼容IE;

3,@media screen and (max-width:980px){} (示例样式)

以上就是有关对CSS3媒体查询知识的总结的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行