1、当屏幕的宽度大于600小于800时，应用styleB.css
- < link rel ="stylesheet" type ="text/css" href ="styleB.css" media ="screen and (min-width: 600px) and (max-width: 800px)" >
2、当屏幕尺寸小于600px时，应用下面的CSS样式
- @media screen and (max-width: 600px) {
- .class {
- background: #ccc;
- }
- }
平时我们的响应式尺寸划分（但是我们也可以根据实际情况自己定义划分）：
- 超小屏幕（手机，小于768px）：设置宽度为
100% - 小屏幕（平板，大于等于768px）：设置宽度为
750px - 中等屏幕（桌面显示器，大于等于992px）：宽度设置为
970px - 大屏幕（大桌面显示器，大于等于1200px）：宽度设置为
1170px
/* 大屏幕 ：大于等于1200px*/
@media (min-width: 1200px) { ... }
/*默认*/
@media (min-width: 980px){...}
/* 平板电脑和小屏电脑之间的分辨率 */
@media (min-width: 768px) and (max-width: 979px) { ... }
/* 横向放置的手机和竖向放置的平板之间的分辨率 */
@media (max-width: 767px) { ... }
/* 横向放置的手机及分辨率更小的设备 */
@media (max-width: 480px) { ... }
