响应式布局

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端。

优缺点

  1. 媒体查询
    这种布局通吃pc和移动端，做到精细处，两者的效果都很好，
    缺点是媒体查询是有限的，也就是可以枚举出来的，
    只能适应主流的宽高。

  2. rem
    优点：理想状态是所有屏幕的高宽比和最初的设计高宽比一样，或者相差不多，完美适应。
    缺点：碰到重视高度的设计，或者重视元素间间距的设计，那就玩不开了。

总结

  1. 如果只做pc端
    那么定宽度是最好的选择
  2. 如果做移动端，且设计对高度要求不高
    那么rem+js是最好的选择，一份css+一份js调节font-size搞定
  3. 如果pc，移动要兼容，而且要求很高，那么媒体查询是不错的选择
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容