9 :篇一上 下一篇: Meta定义网页自动适配电脑或... :

 本日志标题：利用css3媒体查询@media进行响应式页面制作        [2020-8-2]

响应式页面就是根据屏幕尺寸的不同进行不同版面样式的显示。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如下

[Ctrl+A 全部选择进行拷贝 提示：可先修改部分代码，再点击运行]

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

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



在百度搜索完整的利用css3媒体查询@media进行响应式页面制作内容，或者用Google搜索相关的更多内容

By [cnbruce] at 22:26:19 | 评论 [0] | 浏览 [5511] | TrackBack| 返回顶部
9 :篇一上 下一篇: Meta定义网页自动适配电脑或... :

About Comments
此篇日志暂时没有相关的说明和评论。：）


Post a Comment
呢称: 验证码： 
禁止笑脸转换 禁止UBB | 缩放输入框：6 5 | [Ctrl+Enter提交](1000个字符限制)