响应式使用以及bootstrap

第一步：在标签上面加入viewport meta标签来设定
第二步：HTML结构布局
第三步：在css文件中添加Media Queries
例如：
/* for 980px or less */
@media screen and (max-width: 980px) {
//#pagwrap是类名
#pagewrap{
width: 94%;
}
#content{
width: 65%;
}
#sidebar{
width: 30%;
}
}

当视口宽度小于等于480px时（如手机屏幕），将#header高度设为自动，h1的字体大小设定为24px，并隐藏#sidebar。

/* for 480px or less */
@media screen and (max-width:480px) {
#header {
height: auto;
}
h1 {
font-size: 24px;
}
#sidebar {
display: none;
}
}
注意：img标签的话，只需要设置max-width：100%或width:100%;css
背景图可以用background-size:100% 100%;

Bootstrap的使用
1、图片等比例缩放
{
display:block; //这表明相关的图像呈现为block 以块级元素显示
height:auto;
max-width:100%
}
2、Bootstrap3 使用 body {margin :0 } 来移除body的边距

3、容器container
容器container 用于包裹页面上的内容，container是有左右内外边距的，container里卖弄必须包含行row，然后在row里面写内容（列）

详情看bootstrap的菜鸟教程