Day08-HTML5 CSS3

前端拓海

已于 2023-12-02 15:37:09 修改

阅读量41

点赞数

文章标签： html5 css3 前端

于 2023-12-02 14:34:29 首次发布

本文链接：https://blog.csdn.net/Spirs/article/details/134751953

版权

一.媒体查询

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .box {
            width: 1200px;
            height: 500px;
            background-color: pink;
            margin: 100px auto;
        }

        /* max-width 最大宽度 */
        /* min-width 最小宽度 */


        /* max-width 最大宽度  当前屏幕小于992px会应用当前媒体查询里面的样式 */
        @media screen and (max-width:992px) {
            .box {
                width: 750px;
                height: 400px;
                background-color: skyblue;
            }
        }


        /* 当前屏幕大于768px 应用媒体查询里面的样式 */
        @media screen and (min-width:768px) {
            .box {
                background-color: purple;
            }
        }

        /* 做移动端用那些技术
            流式布局 百分比
            弹性盒子
            rem 媒体查询
        */
    </style>
</head>

<body>

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

</body>

</html>

二.适配不同屏幕大小

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .container {
            width: 1200px;
            height: 400px;
            border: 1px solid red;
            margin: 100px auto;
            display: flex;
            justify-content: space-between;
        }

        .container .content {
            width: 290px;
            height: 400px;
            background-color: pink;
        }

        /* 创建多个媒体查询 */
        /* 当屏幕小于1200px */
        @media screen and (max-width:1200px) {
            .container {
                width: 970px;
            }

            .container .content {
                width: 200px;
            }
        }

        /* 当屏幕小于992 */
        @media screen and (max-width:992px) {
            .container {
                width: 750px;
            }

            .container .content {
                width: 175px;
            }
        }

        /* 当屏幕小于768px */
        @media screen and (max-width:768px) {
            .container {
                width: 100%;
                /* display: flex; */
                flex-wrap: wrap;
            }

            .container .content {
                width: 100%;
            }
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
        <div class="content">4</div>
    </div>

</body>

</html>

三.多个条件媒体查询

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .container {
            width: 1200px;
            height: 400px;
            border: 1px solid red;
            margin: 100px auto;
            display: flex;
            justify-content: space-between;
        }

        .container .content {
            width: 290px;
            height: 400px;
            background-color: pink;
        }

        /* 创建媒体查询 */
        /* 当前屏幕大于768 小于992时应用样式 */
        @media screen and (min-width:768px) and (max-width:992px) {
            .container {
                width: 750px;
            }

            .container .content {
                width: 175px;
            }
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
        <div class="content">4</div>
    </div>

</body>

</html>

四.引入不同的css文件

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .container {
            width: 1200px;
            height: 400px;
            border: 1px solid red;
            margin: 100px auto;
            display: flex;
            justify-content: space-between;
        }

        .container .content {
            width: 290px;
            height: 400px;
            background-color: pink;
        }
    </style>

    <!-- 引入外部css文件 -->
    <link rel="stylesheet" media="screen and (max-width:1200px)" href="./css/w1200.css">
    <link rel="stylesheet" media="screen and (max-width:992px)" href="./css/w992.css">
    <link rel="stylesheet" media="screen and (max-width:768px)" href="./css/w768.css">
</head>

<body>

    <div class="container">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
        <div class="content">4</div>
    </div>

</body>

</html>

五.视口

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 这一行代码说明: 布局视口宽度 应该 与 视觉视口宽度 一致 -->
    <title>Document</title>
    <style>
        .box {
            width: 100%;
            height: 500px;
            background-color: pink;
            margin: auto;
        }

        .box2 {
            width: 1px;
            height: 1px;
            background-color: red;
        }
    </style>
</head>

<body>

    <div class="box2"></div>
    <div class="box"></div>
    <!-- 布局视口
            在PC端开发的页面 切换到了移动设配上面 就会显示不全
            此时布局视口要远大于 移动设配的宽度
    -->
    <!-- 视觉视口
            用户正在看到的网页的区域
    -->
    <!-- 理想视口
            布局视口 等于 视觉视口
    -->

</body>

</html>

六.二倍图

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* img{
            width: 100px;
            height: 100px;
        } */
        img:nth-child(1){
            width: 50px;
            height: 50px;
        }
    </style>
</head>

<body>

    <img src="../images/60X60t.png" alt="">
    <img src="../images/120X120t.png" alt="">

</body>

</html>

七.rem

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        /* html{
            font-size: 10px;
        } */
        /* 那么1rem = 10px */
        /* 要通过媒体查询 根绝不同屏幕的大小 为html设置 font-size */
        /* rem 相对于html的字体大小 改变而改变 */

        /* IphoneSE 375 */
        /* IphoneXR 414 */
        /* Iphone12 pro 390 */
        /* ipd 820 */

        /* 限制当前设备宽度最大能够到达多少rem */
        @media screen and (min-width:375px) {

            /* 18.75 */
            html {
                font-size: 20px;
            }
        }

        @media screen and (min-width:414px) {

            /* 18.75 */
            html {
                font-size: 22.08px;
            }
        }

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

        @media screen and (min-width:820px) {

            /* 18.75 */
            html {
                font-size: 43.73333333333333px;
            }
        }



        .box {
            width: 18.75rem;
            height: 10rem;
            background-color: pink;
        }
    </style>
</head>

<body>

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

</body>

</html>