响应式media与响应式图片

性能优化卷响应式

html&css

发布日期: 2022-06-25

文章字数: 424

阅读时长: 2 分

直接上例子上阐明

<body>
    <ul>
        <li class="box">概念：响应式就是根据不同像素变化，做出响应，改变布局</li>
        <li class="box">作用有：
            一、使用media改变局部，例如一行有四个盒子在PC上每个盒子占25%宽，
            切换到手机后使每个盒子占50%宽，剩余换行。又或者是将一些不必要的元素隐藏。
        </li>
        <li class="box">
            二、做性能优化，在手机上的图片不需要PC端那么大的像素，可以用source的media属性来做响应式请求不同的图片
        </li>

        <picture class="box">
            <!-- media会从上到下识别规则 识别到了就返回了 不会再识别下一个 -->
            <!-- 如果media不设置max-width 请按大到小往下排列-->
            <source srcset="image/2.jpg" media="(min-width:600px) and (max-width:1000px)">
            <source srcset="image/3.jpg" media="(min-width:1000px)">
            <!-- 默认图片放下边，否则识别的时候，没有规则会默认使用这张图片 -->
            <img src="" alt="" srcset="image/1.jpg">

        </picture>
    </ul>
</body>
<style>
    html {
        font-size: 10px;
    }

    ul {
        display: flex;
        flex-wrap: wrap;
    }

    li.box {
        box-sizing: border-box;
        display: inline-block;
        background-color: #ffc70e;
        color: rgb(255, 255, 255);
        border: 1px solid orangered;
        margin-bottom: 1rem;
        width: 25%;
        flex-wrap: wrap;
    }


    .box.box_first {
        font-size: 1.5rem;
    }

    .box.box_second {
        font-size: 1.5rem;
    }

    .box.box_three {
        font-size: 1.5rem;
    }

    /* 移动优先: 从最小的屏幕开始进行适配 */
    /* < 346px  */
    @media (max-width: 346px) {
        html {
            font-size: 12px;
        }
    }

    /* 347px - 462px */
    @media (min-width: 347px) and (max-width: 462px) {
        html {
            font-size: 14px;
        }
    }

    /* 463px - 959px */
    @media (min-width: 463px) and (max-width: 959px) {
        html {
            font-size: 16px;
        }
    }

    /* >960px  */
    @media (min-width: 960px) {
        html {
            font-size: 20px;
        }
    }
</style>