响应式布局讲解

响应式布局已经不是什么新鲜事物了，但使用的场景却在变少，因为现在web程序变得愈发丰富和复杂，而产品对移动端的重视也超过了pc端，如果仅用响应式布局实现适配，代码的复杂度和兼容性都难以维护，并且很容易造成代码冗余（比如媒体查询的多余代码）。开发成本和另开发一款程序接近，因此，独立开发出一款针对移动端的web程序已近变成了很多公司最佳方案。

那么响应式布局就无用武之地了？也不是，当我们只是开一款功能单一的展示性程序时，如静态页面，那么响应式布局可能是最优选。所以响应式布局开始从最流行的方案变成一种折中方案。

接下来就讲讲如何设计一个简单的响应式布局。

响应式布局的几个主要因素：

• viewport：
  

响应式布局本来是要适配移动端和pc端的，但viewport的存在让针对移动端的设置都失去了效果，所以第一步就是让viewport失去效果：

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=no”/>

至于viewport具体解释，大家可以看下这个：此像素非彼像素。

• 媒体查询（@media）设置断点：
  

响应式布局最主要的手段便是媒体查询，通过媒体查询设置断点，可以为各种屏幕宽度的设备提供对应样式。断点的设置一般可以设置为三种类型，如手机（<=480px），平板（480-720px），桌面电脑（>=1024px），这当然是大概的设置，如果想更加具体点，可以拖动浏览器屏幕，以适应不同的宽度，选择开始变形的那个尺度作为断点即可。媒体查询的使用：

在样式表中使用：

@media (min-width: 481px) and (max-width:768px) {
 /*具体操作*/
}复制代码

在连接时调用：

<link href="styles.css" rel="stylesheet" media="(max-width:480px)">复制代码

使用@import导入：

@import url(styles.css) (max-width:480px)

具体的使用同学们可以看看MDN的教程。

• 使用流式，浮动栅格布局：
  

响应式布局最常见的就是在pc端使用多栏布局（栅格），因为栅格布局很方便在不同屏幕设备中进行增删或者移动从而实现各种大小屏幕的适配（如小屏幕就一栏，而大屏幕就有三栏），每栏的宽度用流式布局（有时也叫弹性布局，就是width使用百分比）进行适应，因为不同屏幕的宽度各异。然后使用浮动进行横排。最外层包裹元素一般加个max-width，防止pc大屏太宽，导致页面内容跨度过大，造成阅读困难。大概的代码：

<main>
 <aside></aside>
 <article></article>
 <aside></aside>
</main>
<style>
 main{
 max-width:1200px;
 }
 aside{
 float:left;
 width: 20%;
 }
 article{
 float:left;
 width: 60%;
 }
</style>复制代码

然后根据断点判断屏幕大小，对每一栏清除浮动，删减或者移至下方。由于我们是桌面设备优先的，所以媒体查询的是移动端大小，（当然也可以移动端优先，反过来就是了）大概代码：

@media (max-width:481px) {
 aside {
 float: none;
 width: auto;
 }
 article{
 float: none;
 width: auto;
 }
}复制代码

是不是很简单，这就是所谓的响应式布局了，当然代码我是极其简化的，应该还有很多细节上的修饰。除了流式，浮动栅格布局，还有flex布局，table布局等等都是可以实现响应式设计的。具体看情况使用。接下来讲讲一些注意事项：

响应式布局的一些问题：

• 重置盒子模型：
  

web浏览器的盒子模型默认是不把边框和内边距计算在内容区的width中的（IE低版本除外），当使用流式布局时，就是百分比设置栏宽时，会造成干扰，如第一栏的width是60%，第二栏是40%，本来是一行内刚好放得下，但如果某一栏设置边框或者内边距后，整体宽度就被加大，第二栏就会被挤下去。所以要设置box-sizing：border;将边框和内边距计算进内容区的width中，即60%中包含了边框和内边距。当然不嫌麻烦的话，也可以用css的cale函数，不过这会造成性能问题，不建议使用。

• HTML代码的顺序：
  

要注意HTML代码的顺序，因为很多时候我们的主内容区是放到中间的，如：

<aside></aside>
<article></article>
<aside></aside>复制代码

而在移动端时它应该放到最上面，可由于代码的顺序关系，清除浮动后，它是按顺序放到中间去了，（具体看上图）。为了增强用户体验，让移动端的用户第一眼就能看到主要内容，而不用下拉，所以HTML编码时，应该让主内容区放到最上层，要浮动时，加个外层，让主内容区和相邻侧边分别浮动到两边即可。大概代码：

<div>
 <article></article>
 <aside></aside>
</div>
<aside></aside>复制代码

div{
 float:left;
 width: 80%;
}
div article{
 float:right;
 width: 75%;
}
div aside{
 float:left;
 width: 25%
}
aside{
 float:left;
 width: 20%
}复制代码

• 图片和视频的大小：
  

图片也要用百分比，不然会溢出布局之外，一般用max-width：100%，当没有溢出布局时，图片保持原来大小不变，但要溢出布局时，限制图片的最大宽度为布局宽度，注意图片的高度不要设置，不然高度固定的话，图片的宽度变化会导致变形，高度不设置，让它随宽度自动做等比例变化即可。图片的大小变化解决了，但还是有个问题，就是本来移动端要展示的是小图片，但却要下载大图片造成流量的浪费。解决的方法挺多的，比如img最新的srcset属性（有兼容性问题，IE完全不支持）。或者是用js判断获取不同的图片（麻烦）。看情况运用吧。

最后：觉得好的话记得点个赞哈。