相对单位 / 媒体查询 / em和rem简介

最新推荐文章于 2024-04-05 17:38:08 发布

Henry_ww

最新推荐文章于 2024-04-05 17:38:08 发布

阅读量199

点赞数

分类专栏：移动web 文章标签： css less web html css3

本文链接：https://blog.csdn.net/Henry_ID/article/details/119045951

版权

移动web 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

vh和vw相对单位

vh viewport height 1vh = 浏览器可视窗口高度的1%
vw viewport width 1vw = 浏览器可视窗口宽度的1%

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* body {
            height: 100vh;
            
            background-image: linear-gradient(to bottom, #ff0, #6cf);
        } */

        .box {
            width: 10vw;
            height: 50vw;
            background-color: #0a0;
        }
    </style>
</head>

<body>
    <!-- 
        相对单位：书写出来的值是一个相对的值，不确定的值，他是需要依赖于其他已知的值动态计算。
        em rem vh vw %
        vh  viewport height  1vh = 浏览器可视窗口高度的1%
        vw  viewport width   1vw = 浏览器可视窗口宽度的1%
        绝对单位：书写出来的值是一个绝对的值，不会因为其他值的变化而变化
        px s ms deg
     -->


    <!-- 创建一个屏幕宽度一半的正方形 -->
    <div class="box"></div>
</body>

</html>

em和rem

 1em = 当前文字大小
            10em = 10 * 默认16px = 160px


                 1em = 当前文字大小
            10em = 10 * 默认16px = 160px

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            font-size: 20px;
        }

        .em {
            width: 10em;
            height: 10em;
            /* 
                1em = 当前文字大小
                10em = 10 * 默认16px = 160px
            */
            background-color: #0a0;
        }

        .rem {
            width: 10rem;
            height: 10rem;
            font-size: 30px;
            /* 
                rem参考html根标签的字体大小进行计算
                1rem = html的文字大小
            */
            background-color: #6cf;
        }
    </style>
</head>

<body>
    <h1>em</h1>
    <div class="em"></div>
    <h1>rem</h1>
    <div class="rem"></div>
</body>

</html>

媒体查询语法规范

用 @media开头注意@符号
mediatype 媒体类型
关键字 and not only
media feature 媒体特性必须有小括号包含

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

语法

@media screen and ( 媒体特性 ) { css 样式 }

注意点

关键字前后必须有空格，媒体特性用冒号分隔属性名和值，结尾不带有任何符号

mediatype 查询类型

将不同的终端设备划分成不同的类型，称为媒体类型

在这里插入图片描述

关键字

关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。

and：可以将多个媒体特性连接到一起，相当于“且”的意思。
not：排除某个媒体类型，相当于“非”的意思，可以省略。
only：指定某个特定的媒体类型，可以省略。

媒体特性

每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。

注意他们要加小括号包含

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
            注意: 
            1. 连接词前后必须加空格
            2. 媒体特性结尾不能加分号
            3. 如果有多个媒体特性 需要用and符号链接
        */
        /* 匹配屏幕宽度必须是500px的时候 */

        @media screen and (width: 500px) {

            /* 选择器{
                样式
            } */
            body {
                background-color: tomato; 
            }
        }

        /* 
            501px - 800px
            最小宽度是501px
            大于等于501px的时候设置蓝色
        */
        @media screen and (min-width: 501px) and (max-width: 800px) {
            body {
                background-color: #6cf;
            }
        }

        /* 
            最大宽度是499px
            小于等于499px的时候设置绿色
        */
        @media screen and (max-width: 499px) {
            body {
                background-color: #0a0;
            }
        }
    </style>
</head>

<body>

</body>

</html>

动态引入 css 文件

需要加 media 类型条件，不然会覆盖

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


    <!-- <link rel="stylesheet" href="./style320px.css" >
    <link rel="stylesheet" href="./style750px.css" > -->

                                            <!-- 媒体查询首先匹配 screen 类型，并且 >= 320 -->
    <link rel="stylesheet" href="./style320px.css" media="screen and (min-width: 320px)">
    <link rel="stylesheet" href="./style750px.css" media="screen and (min-width: 750px)">
</head>

<body>

</body>

</html>