浏览器支持(版本)
Rule | chrome | IE | firefox | Safari | opera |
---|---|---|---|---|---|
@media | 21 | 9 | 3.5 | 4.0 | 9 |
响应式开发原理
就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的
响应式布局容器
-
超小屏幕(手机,小于 768px):设置宽度为 100%
-
小屏幕(平板,大于等于 768px):设置宽度为 750px
-
中等屏幕(桌面显示器,大于等于 992px):宽度设置为 970px
-
大屏幕(大桌面显示器,大于等于 1200px):宽度设置为 1170px