实现响应式布局的5个CSS实用技巧

在前面的文章中，我们也学到了很多关于响应的课程，但响应CSS的写作仍然有一些技巧，这里主要提到，更方便做项目。事实上，响应式Web设计并不难。这些技能使用简单的CSS属性，如min-width、max-width、overflow 相对属性值，但这些属性在响应设计中起着重要作用。让我们具体看看五个例子：

1. 响应Video (demo)

CSS技能的响应video是由tjkdesign.com发现的。我之前的一篇文章介绍过，你可以在这里阅读。响应视频适应其容器宽度。

1. .video {
2.     position: relative;
3.     padding-bottom: 56.25%;
4.     height: 0;
5.     overflow: hidden;
6. }
7.  
8. .video iframe,
9. .video object,
10. .video embed {
11.     position: absolute;
12.     top: 0;
13.     left: 0;
14.     width: 100%;
15.     height: 100%;
16. }

2. Min & Max Width (demo)

该属性设置了元素的最大宽度。其目的是防止元素“越线”。

最大宽度容器

在下面的例子中，我定义了container的宽度是800px(注:如果其父容器不小于800px)，但不超过父容器的90%。

1. .container {
2.     width: 800px;
3.     max-width: 90%;
4. }
5. <strong>响应式图片</strong>

使用max-width:100% and height:auto，图片可以适应父容器的宽度。

1. img {
2.     max-width: 100%;
3.     height: auto;
4. }

上述CSS可以在IE7和IE9中工作，但IE8不识别。width可以使用:auto修复。您可以使用IE8条件CSS，也可以使用以下IE hack：

1. @media \0scren {
2.   img{width: auto; /* for ie 8 */}
3. }

Min-Width

相反，它设置了元素的最小宽度。在下面的例子中，min-width用于定义input的宽度，防止input拉伸时变小。

3. 相对值 (demo)

在响应设计中，使用相对值可以简化CSS，改善布局。以下是例子。

与Margin相比 下面的例子是评论列表，由相对分散设置。我用百分比值而不是绝对像素值来分隔子列表。从下面的截图可以看出，如果用像素定义，子列表会越来越小。

相对于字体大小 以相对值(如em或%)设置的字体、行高和外距可以继承。例如，只要简单地改变父级元素的字体大小，其子元素的字体大小也可以相应地改变。

相对内边距 下面的截图显示，相对百分比边距优于绝对固定像素边距。左侧的容器反映了像素边距的不平衡。右侧的容器反映了容器空间的充分利用。 <a href=”http://jbcdn2.b0.upaiyun.com/2012/05/5-Useful-CSS-Tricks-for-Responsive-design5.png” target=”_blank”” title=“五个CSS响应式设计的实用技能”>

4. Overflow:hidden Trick 技巧 (demo)

正如我在前一篇文章中所说，我可以使用overflow属性去除浮动。这个技巧很实用。应用overflow:hidden，可以去除上一个元素的浮动，以确保当前容器的内容能够正常显示。

5. Word-break (demo)

我之前也说过word-wrap 属性。强制长文本(如长URL链接)可以换行。

.break-word{word-wrap:break-word}

5. 总结

掌握了响应式的基本知识和一些技能，其他的基本都是一些精细的工作。