css 媒体查询 移动端,媒体查询（pc端，移动端不同布局）

媒体查询语法：

1.内联写法：and之后必须有空格

@media screen and (min-width:960px //判断浏览器大小条件){

body{background：red} //常规的样式

}

2.外联写法：当满足屏幕满足条件的时候连接href后的css文件

媒体查询根据不同屏幕显示不同界面有两种方式：

1.在不同的媒体查询判定的大括号后写不同的样式

2.写两个相同的HTML内部的内容，通过媒体查询判断界面后，显示一个，隐藏另一个

*{

margin: 0;

padding: 0;

}

.big{ /*1*/

width: 1000px;

outline: 1px solid #000;

margin: auto;

color: #fff;

}

.big>div{

width: 50%;

height: 200px;

outline: 1px dashed yellow;

background: orange;

float: left;

}

.big2{ /*2*/

width: 600px;

outline: 1px solid #000;

margin: auto;

color: #fff;

display: none;

}

.big2>div{

width: 100%;