css之媒体查询

因为移动端的尺寸不同,但是，在移动端屏幕上显示的元素的大小是相同的元素的尺寸大小，要根据屏幕尺寸的大小发生变化媒体类型（media types）描述设备的一般类别媒体特性描述了 user-agent输出设备或是浏览器环境的具体特征。

文章共1,628字 · 阅读需要大约6分钟

一键AI生成摘要，助你高效阅读

问答

会玩代码的猫

6974人浏览 · 2023-04-03 18:49:18

会玩代码的猫 · 2023-04-03 18:49:18 发布

一、媒体查询

问题：因为移动端的尺寸不同,但是，在移动端屏幕上显示的元素的大小是相同的

解决：元素的尺寸大小，要根据屏幕尺寸的大小发生变化

1.媒体类型

媒体类型（media types）描述设备的一般类别

all:适用于所有的设备
print：适用于打印模式
screen：主要用于屏幕
speech：主要用于语音合成器

/* 浏览器模式 */
/* @media screen {
    .box {
        font-size: 30px;
    }
} */

/* 打印模式 */
@media print {
    .box {
        font-size: 30px;
    }
}

2.媒体特性

媒体特性描述了 user-agent输出设备或是浏览器环境的具体特征

width:viewport的宽度
height：viewport的高度
aspect-ratio：viewport的宽高比
orientation：viewport的旋转方向

<style>
/* 最大值和最小值的屏幕 */
/* @media (min-width: 700px) {
    .box {
        width: 200px;
        height: 200px;
        background-color: skyblue;
    }
}


@media (max-width: 960px) {
    .box {
        width: 200px;
        height: 200px;
        background-color: skyblue;
    }
} */


/* 
旋转方向 
portrait: 竖屏
landscape: 横屏
*/

@media (orientation: portrait) {
    .box {
        width: 200px;
        height: 200px;
        background-color: skyblue;
    }
}

@media (orientation: landscape) {
    .box {
        width: 1000px;
        height: 200px;
        background-color: red;
    }
}
</style>
</head>

<body>
<div class="box">aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
</body>

3.逻辑操作符

逻辑操作符not and 和only 可用于联合构造复杂的媒体查询

and:用于将多个媒体查询规则组成单条的媒体查询
not：用于否定媒体查询，如果不满足这个条件，返回true，否则返回false
only：用于旧版的浏览器识别媒体类型
逗号：用于将多个媒体查询合并为一个规则

/* 使用and操作符 在区间范围内生效 
注意点：每个屏幕的尺寸点，被称为是屏幕断点（阈值）保证每个断点的值不能重合
*/
@media screen and (max-width:699px) {
    .box {
        width: 1000px;
        height: 200px;
        background-color: green;
    }
}

@media screen and (min-width:700px) and (max-width:1200px) {
    .box {
        width: 1000px;
        height: 200px;
        background-color: red;
    }
}

/* 大于 1200px  */
@media screen and (min-width:1201px) {
    .box {
        width: 1000px;
        height: 200px;
        background-color: blue;
    }
}

/* 取反 */
/* @media not screen and (min-width:700px) {
    .box {
        width: 1000px;
        height: 200px;
        background-color: blue;
    }
} */


/* 逗号相当于是 或 的操作 */
@media screen,
print and (min-width: 700px) {
    .box {
        width: 200px;
        height: 200px;
        background-color: blue;
    }
}

4.link标签方式

旋转方向
portrait: 竖屏
landscape: 横屏

<link rel="stylesheet" href="./a.css" media="(orientation:portrait)">
<link rel="stylesheet" href="./b.css" media="(orientation:landscape)">

二、媒体查询的编写位置和顺序

2.1媒体查询一般会添加到样式表的底部，对css优先级的覆盖

.box{
    width: 100px;
    height: 100px;
    border-radius: 30px;
    background-color: blue
}

/* 媒体查询样式放在普通样式之后 */
@media screen and (max-width:700px) {
    .box {
        background-color: green;
    }
}

2.2移动端->pc端的适配规则：min-width从小到大

.box {
    width: 100px;
    height: 100px;
    background-color: blue;
}

// 注意 700 和 1000 上下的顺序问题
@media (min-width:700px) {
    .box {
        background: green;
    }
}

@media (min-width:1000px) {
    .box {
        background: red;
    }
}

2.3pc端->移动端的适配规则：max-width从大到小

@media (max-width: 1000px) {
    .box {
        background: green;
    }
}

@media (max-width: 700px) {
    .box {
        background: red;
    }
}

3.响应断点（阈值）的设定

<style>
.d-none {
    display: none;
}

@media (min-width:576px) {
    .d-sm-none {
        display: none;
    }
}

@media (min-width:768px) {
    .d-md-none {
        display: none;
    }
}

@media (min-width:992px) {
    .d-lg-none {
        display: none;
    }
}

@media (min-width:1200px) {
    .d-xl-none {
        display: none;
    }
}

@media (min-width:1400px) {
    .d-xxl-none {
        display: none;
    }
}
</style>
</head>

<body>
<div class="d-none">11111111111111111111</div>
<div class="d-sm-none">22222222222222222222222222</div>
<div class="d-md-none">3333333333333333333333333333</div>
<div class="d-lg-none">444444444444444444444444444444444</div>
<div class="d-xl-none">5555555555555555555555</div>
<div class="d-xxl-none">666666666666666666666666666</div>

三、响应式栅格系统

<style>
.row {
    background-color: skyblue;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 50px;
    grid-auto-rows: 50px;
}

.row div {
    background-color: skyblue;
    border: 1px solid solid;
    grid-area: auto/auto/auto/span 12;
}

.row .col-1 {
    grid-area: auto/auto/auto/span 1;
}

.row .col-2 {
    grid-area: auto/auto/auto/span 2;
}

.row .col-3 {
    grid-area: auto/auto/auto/span 3;
}

.row .col-4 {
    grid-area: auto/auto/auto/span 4;
}


.row .col-5 {
    grid-area: auto/auto/auto/span 5;
}

.row .col-6 {
    grid-area: auto/auto/auto/span 6;
}

.row .col-7 {
    grid-area: auto/auto/auto/span 7;
}

.row .col-8 {
    grid-area: auto/auto/auto/span 8;
}

.row .col-9 {
    grid-area: auto/auto/auto/span 9;
}

.row .col-10 {
    grid-area: auto/auto/auto/span 10;
}

.row .col-11 {
    grid-area: auto/auto/auto/span 11;
}

.row .col-12 {
    grid-area: auto/auto/auto/span 12;
}
</style>
</head>

<body>
<div class="row">
<div class="col-3">col-3</div>
<div class="col-3">col-3</div>
<div class="col-3">col-3</div>
<div class="col-3">col-3</div>
</div>
</body>

四、实现断点设定

五、响应式交互

利用：checked伪类
利用js脚本

<style>
/* 
1、实现不同屏幕尺寸元素的消失和出现
2、实现点击菜单按钮 显示导航
*/
ul {
    display: none;
}

input{
    display: none;
}

input:checked + ul {
    display: block;
}

@media (min-width: 700px) {
    ul {
        display: block;
    }

    span {
        display: none;
    }
}
</style>
</head>

<body>
<!--  <span>菜单按钮</span>
<ul>
<li>首页</li>
<li>教程</li>
<li>论坛</li>
<li>娱乐</li>
</ul> -->


<label for="menu">
<span>菜单按钮</span>
</label>
<input type="checkbox" id="menu">
<ul>
<li>首页</li>
<li>教程</li>
<li>论坛</li>
<li>娱乐</li>
</ul>
</body>

rem和em

html{
    /* 1rem = 100px */
    font-size: 100px;
}
/* 
16  32px = 1em 
如果元素本身没有字体大小，那么,em基于父元素计算  
如果元素本身有字体大小  那么 em基于本身的字体大小计算

rem是参考根元素的计算的
*/
/* div {
    font-size: 2em; 
    width: 10rem;
    height: 10rem;
    border: 1px solid red;
} */

6.动态字体的计算

<style>
/* html { */
    /* 1rem = 10px */
    /* font-size: 100px; */
/* } */

@media screen and (min-width:700px){
    html{
        font-size: 50px;
    }
}

@media screen and (min-width:960px){
    html{
        font-size: 70px;
    }
}

div{
    width: 10rem;
    height: 10rem;
    background-color: red;
}