东方龙技术

响应式页面就是根据屏幕尺寸的不同进行不同版面样式的显示。css3的meidia媒体查询的属性可满足该需求的定义。

第一种方式

为不同的屏幕尺寸定义不同的css样式，屏幕尺寸变化时动态调整css。优点是独立定义css文件管理方便，缺点是需要加载多个css文件。

<!--html标签--!>
<link rel="stylesheet" media="(max-width: 900px)" href="sty1.css" />
<link rel="stylesheet" media="(max-width: 700px)" href="sty2.css" />

即屏幕尺寸不超过900px时使用syt1.css样式，同时尺寸不超过700px时使用sty2,css样式。顺序不能反。

第二种方式

采用一个css文件，定义样式时通过@media媒体查询进行区分。优点是一个样式文件搞定多种屏幕需求。

/*css标签*/
@media screen and (max-width:992px){
 body {
  background-color: #FF0000;
 }
}

@media screen and (max-width:768px){
 body {
  background-color: #000000;
 }
}

即可屏幕不超过992px时背景颜色是红色，同时背景颜色不超过768px时背景颜色是黑色。

调试html如下

<style>
/*css标签*/
@media screen and (max-width:992px){
 body {
  background-color: #FF0000;
 }
}

@media screen and (max-width:768px){
 body {
  background-color: #000000;
 }
}
</style>

以上代码进行调试，弹出的窗口进行拖拉缩放时可查看到：页面尺寸小于768px时候网页背景色是黑色，超出768px同时又小于992px时网页背景色是红色。

通过media媒体查询就可以来任意定义当前属性样式在某尺寸分辨率下的具体表现了。