css媒体查询
语法:
@media not|only mediatype and|only|not (mediafeature and|or|not mediafeature){...}
mediatype常用值有
- screen 用于电脑屏幕、智能手机等
- print 打印机
- all 所有设备
- speech 屏幕阅读器等
media feature的值常见有
- min-width / min-height --页面可见的最小宽高
- max-device-width/max-device-height --屏幕可见的最小宽高
- max-resolution/min-resolution --设备最大最小分辨率,如96dpi
PS:一般时候使用max-width或者min-width去限定不同设备的宽度。
@media screen and (max-width:600px) {
.container{
width:100%;
}
}