根据宽度选择CSS

自适应站点的核心,就是一套代码可以在任何尺寸屏幕的设备上,恰当的展示信息。如何根据屏幕的宽度来选择性的使用 css,就尤为重要了。

总共有三种方法可以应用媒体查询:

1.样式表链接的媒体查询属性

直接在 HTML文件头部引入以下代码:

<link rel="stylesheet" media="screen and (max-width:500px)" href="1.css" />
<link rel="stylesheet" media="screen and (min-width:501px) and (max-width:599px)" href="2.css" />
<link rel="stylesheet" media="screen and (min-width:600px)" href="3.css" />

(max-width: 500px) 是指:屏幕尺寸 500px,即使用此 css。

(min-width:501px) and (max-width:599px) 是指:501px≤ 屏幕尺寸 ≤599px ,即使用此 css。

(max-width: 600px) 是指:600px≤ 屏幕尺寸,即使用此 css。

演示 Demo

1.css 的背景设置为  bisque 

即 当 屏幕尺寸 ≤500px,为      

2.css 的背景设置为  aquamarine 

即 当 501px ≤ 屏幕尺寸 ≤ 599px,为      

3.css 的背景设置为  aqua 

即 当 600px ≤ 屏幕尺寸,为      

按照代码,可以得到如下效果:

除此之外,还有以下两种方法可以实现。

2.在 @tag 标签嵌入

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

3.在 @import 标签嵌入

@import url("1.css") only screen and (min-width: 500px);

但是因为性能的原因,我们应该避免使用 @import,这是一个代价和优先级都非常高的标签。

在网页设计中,你也要考虑 css 与 @media 的权衡,css引入的多了,HTTP请求次数也会增加,拖累整个网站的加载速度。要根据实际情况,合理的选择方法。

发表评论

电子邮件地址不会被公开。