html5-css3 -- 总结 05（小白）

柿子来了

于 2024-08-17 09:00:00 发布

阅读量182

点赞数 8

文章标签： html5 css3 前端

本文链接：https://blog.csdn.net/2301_78949452/article/details/141155708

版权

媒体查询

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        /* mediatype 设备类型 */
        /* expressions 设备特性 */
        /* @media not|only mediatype and (expressions) and（expressions）... {
            CSS-Code;
        } */

        /* screen 设备屏幕 */
        /* max-width 最大宽度 */
        /* min-width 最小宽度 */

        /* @media screen and (max-width:760px) {
            .box {
                width: 400px;
                height: 200px;
                background-color: #f00;
            }
        } */

        /* @media screen and (min-width:320px) {
            .box {
                width: 100px;
                height: 100px;
                background-color: purple;
            }
        } */


        @media screen and (min-width:320px) and (max-width:760px) {
            .box {
                width: 400px;
                height: 400px;
                background-color: #0f0;
            }
        }

        /* 屏幕横向 */
        @media screen and (orientation: landscape) {

            .box {
                background-color: orange;
            }
        }
    </style>
</head>

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

</html>

根据不同特性引用不同css

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="./02.css">

    <!-- 通过媒体查询引用不同的css  -->
    <link rel="stylesheet" media="screen and (max-width:960px)" href="./022.css">
</head>

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

</html>

移动端布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <!-- 监听视口 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- - width=device-width：视口宽度和设备保持一直
    - initial-scale=1.0：表示初始的缩放比例1.0；
    - user-scalable=no：不允许用户进行缩放； -->
    <title>Document</title>
</head>
<body>
    <!-- 移动端布局 pc布局 -->

    <!-- 物理像素  逻辑像素 -->
</body>
</html>

倍图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div{
            width: 60px;
            height: 60px;
            border: 1px solid #000;
        }

        div img{
            width: 100%;
        }
    </style>
</head>
<body>
    <div>
        <!-- <img src=".60X60t.png" alt=""> -->
        <img src=".120X120t.png" alt="">
    </div>
</body>
</html>

移动端布局2

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            background-color: #f00;
        }

        .w1200 {
            width: 90%;
            height: 600px;
            margin: 0 auto;
            background-color: #f00;
        }
    </style>
</head>

<body>
    <!-- 布局方式 -->
    <!-- 1.静态布局：写多大就固定多大 -->
    <!-- 2.流式布局：大小改变，位置不变 -->
    <!-- 3.自适应布局：大小不变，位置改变 -->
    <!-- 4.响应式布局： -->

    <!-- 移动设备 375  960 -->

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

    <!-- 版心 -->
    <div class="w1200"></div>
</body>

</html>

rem

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        html {
            font-size: 10px;
        }

        .father {
            width: 400px;
            height: 400px;
            border: 1px solid black;

            font-size: 20px;
        }

        .son {
            /* width: 10em;
            height: 10em; */

            width: 10rem;
            height: 10rem;
            background-color: red;
        }
    </style>
</head>

<body>
    <!-- px 像素单位 -->
    <!-- em 相对单位，相对于父元素的字体大小的倍数 -->
    <!-- rem 相对单位，root 根元素的字体大小 -->

    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

多设备适应

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 结合媒体查询，做移动端适配 */

        /* iphone 6/7/8   375px */
        @media screen and (min-width:375px) {
            html {
                font-size: 10px;
            }
        }

        /* iphone *6/7/8 plus */
        @media screen and (min-width:414px) {
            html {
                font-size: 11.04px;
            }
        }

        /* iphone 14 pro max 430px */
        @media screen and (min-width:430px) {
            html {
                font-size: 11.47px;
            }
        }

        .box {
            width: 20rem;
            height: 20rem;
            background-color: red;
        }
    </style>
</head>

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

</html>