自适应,响应式以及图片的性能优化(响应式图片)

最新推荐文章于 2024-03-12 11:59:09 发布

原创最新推荐文章于 2024-03-12 11:59:09 发布 · 645 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #css

本文介绍了淘宝的无限适配解决方案，通过改变html的font-size实现移动端的响应式布局。同时讲解了媒体查询的使用，以及如何通过picture标签实现响应式图片加载，确保在不同设备上提供最佳展示效果。

自适应:最常见的就是淘宝无限适配[移动端]+rem单位

index.js · 2.0 · mirrors / amfe / lib-flexible · GitCode

可以将这个淘宝无限适配的index.js引入自己的文件中

(它的核心原理就是改变html的font-size的字体大小)

响应式:一个url可以响应多端

响应式最常见的就是媒体查询

语法结构:

  @media only screen and (max-width:1000px) {
            ul li :last-child {
                display: none;
            }
        }

only:可以排除不支持媒体查询的浏览器

screen:设备类型

max-width | max-height

min-width | min-height

使用响应式图片的语法应该是这样:

    <picture>
        <source srcset="1.jpg" media="(min-width:1000px)">
        <source srcset="2.jpg" media="(min-width:700px)">
        <img srcset="3.jpg" alt="">
    </picture>

就是用picture标签包裹我们的img标签

上面这样写默认加载的是3.jpg这个图片

而我们上面的source 会根据 media的条件进行显示!