admin 管理员组

文章数量: 887021

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

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

 

本文标签： 自适应 响应式以及图片的性能优化(响应式图片)

版权声明：本文标题：自适应,响应式以及图片的性能优化(响应式图片) 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1688195746h190672.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。