CSS3 @media媒体查询的使用

需求：适配不同的屏幕大小

使用方法：screen用于电脑屏幕，平板电脑，智能手机等。

1、屏幕小于800

@media screen and (max-width: 800px) {
        // css 样式
 }

2、屏幕大于700

@media screen and (min-width: 700px) {
        // css 样式
 }

3、屏幕大于700并小于800

@media screen and (min-width: 700px) and (max-width: 800px) {
        // css 样式
 }

css样式

1、常规使用方法

@media screen and (min-width: 700px) and (max-width: 800px) {
       color: red;
 }

2、引入外部的css文件

@media screen and (min-width:700px) and (max-width:800px){
@import 'style-7-9.css'
}

以下3种方法都有效

@import url("global.css")
@import url(global.css)
@import "global.css"