详解使用CSS3的@media来编写响应式的页面

2020-05-10 11:24:53易采站长站整理

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最新的渲染模式。

代码实例

1、如果文档宽度小于等于 300px 则应用花括号内的样式——修改body的背景颜色(background-color):


@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}

从上面的代码可以看出,媒体类型是屏幕(screen),使用 一个 and 连接后面的媒体功能,这里写的是 max-width:300px ,也就是说,当屏幕的最大宽度 小于等于 300px 的时候,就应用花括号里面的样式。 2、当文档宽度大于等于300px 的时候显示的样式


@media screen and (min-width: 300px){
body {
background-color:lightblue;
}
}

注意,这里的媒体功能使用的是 min-width 而不是 max-width,我已经标红高亮显示出来了。 3、当文档宽度大于等于 300px 并且小于等于500px 的时候显示的样式

注意,这里使用了两个 and ,用来连接 两个媒体功能,一个用于限制最小,一个用于限制最大。

※ 需要注意的地方(划重点)

1、通过灵活应用以上技巧,开发出一个响应式页面,还不是近在咫尺的感觉_(:з」∠)_ 2、不要被 min-width 和 max-width 所迷惑,初学者很容易误以为 min-width 的意思是小于xxx的时候才应用,然而这就陷入误区了,其实它的意思是:当设置了 min-width 的时候,文档的宽度如果小于设置的值,就不会应用这个区块里的CSS样式,所以 min-width 它才能实现大于等于设置的值得时候,才会应用区块里的CSS样式,max-width 也是如此。 3、或者这样想想,先看代码,这句代码的意思是大于等于 300px ,小于等于 500px的时候应用样式