1.设置meta标签
大多数移动浏览器将HTML页面放大为宽的视图（viewport）以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。在
<head>标签里加入这个meta标签。<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">（user-scalable = no 属性能够解决 iPad 切换横屏之后触摸才能回到具体尺寸的问题。 ）
2.通过媒体查询来设置样式
原文链接：http://caibaojian.com/356.html
Media Queries 是响应式设计的核心。·
它根据条件告诉浏览器如何为指定视图宽度渲染页面。假如一个终端的分辨率小于 980px，那么可以这样写：@media screen and (max-width: 980px) { #head { … } #content { … } #footer { … } }这里的样式就会覆盖上面已经定义好的样式。
3.百分比设置宽高
- 使用vw和vh来自适应布局
- rem 布局
原理是，先按定高宽设计出来页面，然后转换为rem单位，
配合js查询屏幕大小来改变html的font-size，
最终做出所谓的完美自适应。
- 定宽布局
很多pc的网站都是定宽度布局的，也就是设置了min-width，
这样一来，如果小于这个宽度就会出现滚动条，
如果大于这个宽度则内容居中外加背景，
这种设计常见与pc端。
优缺点
媒体查询
这种布局通吃pc和移动端，做到精细处，两者的效果都很好，
缺点是媒体查询是有限的，也就是可以枚举出来的，
只能适应主流的宽高。rem
优点：理想状态是所有屏幕的高宽比和最初的设计高宽比一样，或者相差不多，完美适应。
缺点：碰到重视高度的设计，或者重视元素间间距的设计，那就玩不开了。
总结
- 如果只做pc端
那么定宽度是最好的选择 - 如果做移动端，且设计对高度要求不高
那么rem+js是最好的选择，一份css+一份js调节font-size搞定 - 如果pc，移动要兼容，而且要求很高，那么媒体查询是不错的选择
