关于新手如何学习H5和CSS(八)

媒体查询

1 语法结构

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

        }

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

注意：媒体查询：使用方式
1：以一个端为主项目，它的样式；我们正常写的
2: 需要兼容的端，它的样式我们写在媒体查询中
3：兼容性问题：ie10 以下不兼容