媒体查询

本人喜欢用的：（需要用到多少个屏幕适应的话就写几套css代码）

1、引入头文件<meta>告诉浏览器要自适应网页大小

<metaname="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

2、示例，在此就只写两个屏作为说明：

@media screen and(max-width:1365px){

body{

background:green;

}

}

@media screen and(min-width:1366px){

body{

background:red;

}

}

3、解释属性：

width=device-width---->表示宽度是设备屏幕的宽度

initial-scale=1.0----->表示初始的缩放比例(0~1)此处表示不缩放

maximum-scale=1.0----->表示最小的缩放比例此处表示不缩放 

user-scalable=no/yes ----->表示用户是否可以调整缩放比例