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

自适应:最常见的就是淘宝无限适配[移动端]+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的条件进行显示!