pad html5适配,CSS网页响应式布局 自动适配Pc/Pad/Mobile设备

前言

现在的设备很多，有PC、iPad、手机、智能手表、智能电视。如果没有响应式布局，那么电脑网页在手机或者ipad上显示，是体验非常差，操作不方便，视觉疲劳的，所以我们开发网页要做好响应式布局。

index

响应式布局

头部

左侧

中间

右侧

底部

CSS

*{

margin: 0;

padding: 0;

}

/*适应PC端 宽度大于1000px*/

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

#content{

width: 960px;

margin:0 auto;

}

#header{

width: 100%;

line-height: 100px;

float: left;

background: #333;

color: #fff;

text-align: center;

font-size: 30px;

margin-bottom: 10px;

}

#left{

width: 200px;

line-height: 400p