@media

css3中我们可以使用@media来实现响应式布局

1. 语法

@media mediaType and|not|only (media feature)
mediaType 取值
　all　用于所有设备
　print　用于打印机和打印预览
　screen　用于电脑屏幕，平板电脑，智能手机等
　speech　应用于屏幕阅读器等发声设备
media feature　常用取值
　width，max-width，min-width等

2. 强调min-width和max-width

@media screen and (min-width: 900px){
  .btn{
      width: 33.33%;
    }
}

上述样式只有在屏幕宽度大于等于900px时，才会生效

@media screen and (max-width: 600px){
  .btn{
      width: 25%;
    }
}

上述样式只有在屏幕宽度小于等于600px时，才会生效

本文目的仅仅是为了个人查找阅读等提供方便