媒体查询

产生原因:页面元素根据屏幕大小自动缩放,以呈现等比例变化

流式布局(百分比布局)和flex布局主要是针对宽度的布局,在高度上不能响应式变化

响应式布局:

  • 网页可以根据不同的设备或者窗口大小呈现出不同的效果

  • 使用响应式布局,可以使一个网页适用于所有的设备

  • 响应式布局的关键是 媒体查询

作用:可以通过媒体查询给不同宽度的屏幕设置不同的样式,当我们重置浏览器大小的时候,页面也会根据浏览器的宽度和高度重新渲染页面

格式: media翻译 媒体 关键字 and or only ;and可以将多个媒体特性链接在一起,且(交集);not 排除某个媒体类型,非(可以省略);only 指定某个特定的媒体类型 可以省略; 逗号, 表示 或(并集)

@media 媒体类型 and|not|only (媒体功能){
    样式声明
}

@media,@不可省略

媒体类型:screen 屏幕 ;手机,电脑,平板屏幕

all 所有设备

print 打印设备

speech 屏幕阅读器等发生设备

可以使用逗号 , 连接多个媒体类型,这样他们之间就是或的关系

@media screen,print{
  body{
   font-size:16px;
  }
}

可以在媒体类型之前添加一定义在输出设备中页面可见区域的宽度,屏幕宽度为500px

样式切换的分界点,我们称其为断点,也就是网页的样式会在这个点时发生变化

一般比较常用的断点

小于768 超小屏幕 max-width=768px 手机

大于768 小屏幕 min-width=768px

大于992 中型屏幕 min-width=992px

大于1200 大屏幕 min-widt=1200px

注意:

媒体功能要使用括号包围

max-width和min-width都是包含等于

@media screen and (max-width:350px){
        html{
            font-size:24px;
        }
}
@media screen and (min-width:351px){
        html{
            font-size:24px;
        }
}

在我们的屏幕上 并且 最大的屏幕宽度为350px 设置样式,即宽度<=350px的屏幕

推荐媒体查询我们按照从小到大的顺序来书写

移动端布局通过媒体查询和rem就可以实现不同的设备宽度,元素的尺寸也动态变化

使用媒体查询根据不同的设备比例设置html字体大小,然后页面元素使用rem单位,当html字体变化时元素的尺寸也会发生变化,从而达到等比例缩放的适配效果

按照设计稿与设备宽高的比例,动态的计算出html标签的font-size大小(媒体查询),css中,设计稿元素的宽高相对位置等取值,按照同等比例换算为rem单位的值

通过媒体查询,不同的屏幕尺寸引入不同的样式资源

 <!-- 外链样式文件 -->
 <link rel="stylesheet" href="./style.css" media="screen and (max-width:350px)">
  <link rel="stylesheet" href="./style.css" media="screen and (min-width:351px)">