响应式 - 基于min-width和max-width属性的响应式布局

前言

响应式布局的很多解决方案都相当复杂，但是本节中的方法却非常简单。该方法通过在3个浮动元素上设置min-width和max-width属性来实现响应式布局。只要采用CSS中这个非常简单的响应式布局特性，就能够适应移动设备和不同尺寸的计算机屏幕。

 

准备工作

在极小视窗的限制下，把浮动元素的多个列合并显示为一个列并不是什么新鲜的玩意，在很多年前就已经成为CSS1的一个标准属性。但是在移动设备普及之前，该属性一直被认为没有多大的作用。接下来我们使用这个老旧的状态属性，结合一些新的CSS属性来实现响应式布局。

 

实现方式

创建一个简单的根元素为article的HTML页面，其中包含一个h1的头元素及三个div元素。第一个div元素包含一张图片，第二个和第三个div元素包含一些文本内容。给这三个元素都设置float类，然后再分别设置其ID为one、two及three：

接下来，为.article元素创建对应的样式，并赋予属性值width:100%;、max-width:1280px;以及自动的侧边距值。然后将h1标题居中。设置img元素属性为width:100%和height:auto;，使得该元素自适应于父元素。而对于含有img的外部浮动元素，设定属性min-width的值为500px。当然，也可以给每个浮动元素设置不同的背景色，从而让它们更容易辨识。但是对于响应式布局来说，这不是必需的。对于已经设置过.float类的浮动元素，可以添加max-width:350px的属性值，并同时设置向左浮动。为了进一步看得更清楚，设置文本为两端对齐。

当这一切都完成以后，现在你只需要在浏览器中打开HTML页面，接下来会看到页面布局非常平滑地从三列变为两列，最终只有单列的布局方式。具体的效果见下面的截图。

 

工作原理

施加于列元素之上的max-width属性使得列的宽度不是固定的，但是同时限定了最大值。相对于设置静态的宽度，该方法赋予了列布局更好的灵活性。图片所在列利用min-width属性，能够响应父元素宽度的变化，比如增加或收缩宽度。最终，通过float属性，整个页面能够从三列的布局方式平滑地过渡为单列布局方式；一旦没有足够的空间并列容纳float元，最后一个列元素将会从列布局中移除，并放置在新的一行中。