媒体查询

媒体查询

语法结构：

@media  媒体设备 and (条件){
             选择器{
                 属性：值;
             }
         }

• @media 表示媒体查询
• screen 表示查询设备，媒体设备是个变量，在什么设备下用什么值(电脑，手机，平板)
• speech 阅读设备 all 所有设备
• and 连接符；并列条件
• 屏幕条件：
  • max-width：230px 在230px以下的尺寸中使用媒体样式
  • min-width：230px 表示在大于230px 尺寸中使用媒体样式
  • 总结：max 指的是屏幕最大时，也就是当屏幕小于最大屏幕时，条件成立
    min 指的是屏幕最小时，也就是当屏幕大于最小屏幕时条件成立

响应式布局

1：使用相对单位 % rem vh vw
2：使用媒体查询，相当于在不同情况下另写了一套css样式
3：借助UI框架，因为是别人封装好的响应式