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">
            <li><a>实战课程</a></li>
            <li><a>八点直播</a></li>
            <li><a>社区讨论</a></li>
            <li><a>在线教程</a></li>
        </ul>
        <ul id="login">
            <li><a>登录</a></li>
            <li><a>注册</a></li>
        </ul>
    </header>

scss

// :root {
//     font-size: 15px;
// }
// 等价于
html {
    font-size: 15px;
}

.container {
    width: 1180px;
    height: 60px;
    margin: 0 auto;
    display: flex;
    align-items: center; //交叉轴居中对齐
    border-bottom: 5px #1d953f solid;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .3); //盒子阴影
    #logo {
        color: #78a355;
        font-weight: bold;
        margin: 0 20px;
        font-size: 1.3rem; //就是1.3个单位的root设置的像素即15px
    }
    ul {
        list-style-type: none;
        display: flex;
        flex-grow: 1;
        li {
            display: flex;
            margin: 0 10px;
            a {
                text-decoration: none;
            }
        }
    }
    #links {
        li {
            a {
                &:hover {
                    color: #84bf96;
                    font-weight: bold;
                }
            }
        }
    }
    #login {
        a {
            // 此处bug:a标签设置了块元素也不能加上边框样式
            display: block;
            border: 5px #84bf96 soild;
            border-radius: .3rem;
            padding: 0.3rem 1rem;
            color: #84bf96;
            &.form-bg {
                background: #84bf96;
                color: white
            }
        }
    }
}

11.导航栏的响应式处理(接上例)

需求:小尺寸和超小尺寸时links菜单消失

@media only screen and (max-width:750px) {
    #links,
    #login {
        display: none;
    }
    .logo {
        margin-right: auto;
        &+label {
            border: 1px #ddd solid;
            padding: 0.5rem 1rem;
            color: #555;
            cursor: pointer;
            .icon {
                width: 1.5rem;
            }
        }
    }
}

效果:宽度为750px-时,隐藏#links和#login,显示label,
其中包含列表的小图标,后续会添加点击展开效果

四.知识点回顾

box-shadow 的属性值

属性值详解:box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow:必需的。水平阴影的位置。允许负值
v-shadow:必需的。垂直阴影的位置。允许负值

blur:可选。模糊距离
spread:可选。阴影的大小
color:可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset:可选。从外层的阴影(开始时)改变阴影内侧阴影

fontawesome.com:跟iconfont一样的图标网站