2022-02-02 CSS3媒体查询响应式布局

一.指定媒体设备的方法

1.在style标签中指定媒体设备

media的属性值可以为:screen,print,all等

2.使用link标签设置媒体类型

3.使用@import简化多文件引用

在common.css使用@import引用多文件

再在HTML的link标签中单独引入这个common.css文件即可

二.@media的使用

4.样式表中使用@media局部定义响应查询

效果:网页宽度小于600px时,ul消失,
常用于navbar导航栏,在宽度较大的页面中显示,在小屏幕中不显示

5.逻辑与条件判断响应式使用:and

效果:页面宽度在768~1000px之间是,字体颜色为红色,小于768px时字体颜色为蓝色
注意:若页面宽度切好为768px时,显示什么颜色?==>以最后设置的为准(覆盖),即蓝色

6.逻辑或条件判断响应式使用:,(逗号)

效果:屏幕为横屏或者屏幕宽度为768px时,字体显示为红色

7.逻辑非条件判断响应式使用:not

效果:屏幕宽度在500~768px之间时,字体颜色不变红,即屏幕宽度在这个范围之外时,字体颜色变红
注意:not要写在screen的前面

8.使用only排除底端浏览器(不常用)

效果:仅在支持媒体查询的浏览器生效
注意:only也是写在screen前面

三.响应式布局的应用示例

9.@import引入css文件的顺序要注意

比如此处:(big.css和medium.css各设置了背景色)

会出现一个bug,即宽度先从1200px=>960~1200px时,背景色顺序改变,然而
宽度再从960~1200px=>1200px时,就不能获取到big.css的样式了
原因:此时屏幕宽度都在1200px+,两个@import都复合条件且后面的@import优先级更高

改成这样就可以避免这类问题

10.示例:navbar导航条的打底布局

最终效果

代码

html

   <header class="container">
        <div id="logo">导航栏</div>
        <ul id="links">