首先,先看下面一段代码:
1 | < link rel = "stylesheet" type = "text/css" href = "styleA.css" media = "screen and (min-width: 400px)" > |
media
=
"screen and (min-width: 400px)"
>
”,这个是说,只有当浏览器窗口大于等于400像素的时候,引入这个css文件,否则,不使用。这是引入css文件,还有就是在css文件内部定义不同大小窗口,应用不同的样式:
1 | @media screen and (max-width: 600px) { |
2 | .class { |
3 | background: #ccc; |
4 | } |
5 | } |
这两种方法都可以。这样的话,就可以对不同尺寸的浏览器应用不同的样式,运行下面的代码,尝试改变浏览器的宽度,看看效果:
提示:您可以先修改部分代码再运行
通过上面运行的代码,我们发现,@media screen 真是“神器”,有了这玩意,我们再也不用专门做一个手机站,一个电脑站了,定义两套css就可以了,规定下,什么时候用哪个css就没问题了!