响应式布局

响应式布局

在不同的屏幕大小下显示的样式不同，简而言之，就是一个url响应多端

案例

德勤官网：德勤官网 (deloitte.com)
当我们放大缩小屏幕的时候网页的样式也会随之发生改变，这就是响应式布局

实现响应式布局

媒体查询

@media 关键词  媒体类型  and  (媒体特性){
            css代码
}

关键词
only：可以排除不支持媒体查询的浏览器
not：排除某个媒体类型，否定媒体查询
媒体类型

媒体类型.png
媒体特性
媒体特性.jpg
例如

//当屏幕大小小于等于800px的时候，背景颜色是蓝色（内部样式）
@media only screen and (max-width:800px){
          html{
              background-color:blue
           }
}
//外部链接样式
<link rel="stylesheet" media="关键词  媒体类型  and  (媒体特性)" href="xxx.css">

性能优化

根据设备宽度的不同，加载尺寸更合适的图片，以达到性能优化的目的

<picture>
    <!-- 屏幕大小>=1000px -->
    <source srcset="1.jpg" media="(min-width:1000px)">
    <!-- 500px<=屏幕大小<1000px -->
    <source srcset="2.jpg" media="(min-width:500px)">
    <!-- 屏幕大小<500px -->
    <img src="3.jpg" alt="">
  </picture>