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