Responsive设计的十个基本技巧(3)

　　使用流体布局，有一个小技巧注意，为了让浏览器计算小数点的四舍五入的问题，影响页面布局，所以你的百分比小数位尽量多取一些位数，(如果你有看bootstrap的源码，你就能很明显的看到他的百分比布局，小数点后面精确到十多位)。当然大家对这个数值不好把握的话，可以使用现成的网格系统，

　　30+ CSS Grid System(这里搜集了近40个不同网格系统的介绍)

　　8个实用的响应式设计框架(这里搜集了15个具有responsive设计的网格框架系统)

　　流体布局是方便，但是苦于的是，如果在设置了流体宽度值的元素上添加padding和border，那就凶险了，这个你懂的(css box module)有介绍：

　　那有没有可解决的方法?方法是有的，早期是在设置宽度的元素内嵌套一个div，并将padding和border设置在这个内嵌元素上，这样就多增加了一个额外标签，其实在CSS3中有一个更好的方法，就是使用box-sizing来改变box module的默认模型。

　　举个例子，我们有一个“div”元素：他的宽度是67%，而且需要设置一个15px的内距padding和3px的边框border。Box module此时默认的宽度是：

　　div宽度=67% + 2*15px + 2*3px

　　这样一来造成web页面总布局的宽度大于100%;从而撑破了web的布局，为了让这个div不在改变box module的宽度，也就是说，不管他的padding和border设置的是何值，而其width永远不变，还是“67%”，那么我们就需要使用box-sizing来改变，这样一来，我们可以在样式表中这样设置：

　　*{

　　-webkit-box-sizing: border-box;

　　-moz-box-sizing: border-box;

　　-o-box-sizing: border-box;

　　-ms-box-sizing: border-box;

　　box-sizing: border-box;

　　}

　　扩展阅读：

　　30+ CSS Grid System

　　8个实用的响应式设计框架

　　Mobile Responsive Design: The Flexible Grid

　　Flexibility: A Foundation for Responsive Design

　　Going From Adaptive To Fully Responsive

　　Responsive Web Design

　　Gridpak: The Responsive Grid Generator

　　Five steps to gettin’ flexy in responsive web design

　　五、图片的自适应

　　布局实现自适应不难，那么图片怎么做到呢?也就是说我的一张图片，有什么方法可以让他在不同的设备上显示能根据屏幕大小自适应，处理这种效果有一个方法，如果你的web页面不会受到带宽宽的影响(不考虑性能)，你可以先制作一图片让其适合最大屏幕，然后通过样式来控制不同设备下显示的大小;另外一种办法就是你可以为每个断点准备不同的图片。

　　图片自适应大小

　　使用样式来控制图片的自适应：

　　img {

　　max-width: 100%;

　　}

　　断点图片

　　为每一个断点提供不同的的图片，这是一个比较头痛的事情，因为Medial Queries并不能改变图片"src"的属性值，那有没有办法可以解决呢?可以参考一下下面的解决方法：

　　使用background-image:给元素使用背景图片，

　　显示/隐藏父元素：给父元素使用不同的图片，然后通过Medial Queries来控制这些图片显示或隐藏。

　　一起来看一个断点解决图片自适应的例子：

　　对应的CSS代码

　　@media (min-device-width:600px) {

　　img[data-src-600px] {

　　content: attr(data-src-600px, url);

　　}

　　}

　　@media (min-device-width:800px) {

　　img[data-src-800px] {

　　content: attr(data-src-800px, url);

　　}

　　}

　　扩展阅读：

　　Adaptive images: solving the responsive image problem

　　Responsive Images Without JavaScript

　　How to style flexible images for RWD

　　Adaptive Images for Responsive Designs

　　Rundown of Handling Flexible Media

　　On Responsive Images

　　Responsive images: what's the problem, and how do we fix it?

　　Responsive Images: How they Almost Worked and What We Need

　　Responsive images without Javascript

　　Responsive Image Techniques & Resources

　　六、别忘了min和max

　　在Responsive中有两个关键词也是非常的重要，“min-width”和“max-width”。这两个属性值能帮助你定义responsive临界点的一个相对值。典型的好处：

　　防止你的布局变大或变小

　　结合液体布局，max-width和min-width在medial queries临界点(断点)能做到更好的适应性。

　　一起来看几个简单的运用：

　　液体布局中，如果你的宽度不小于768px，同时不大于1024px，那么我们就可以使用：

　　min-width: 768px;

　　max-width: 1024px;

　　比如“#main”元元素宽度不低于1000px的桌面上显示，那么我们就可以这样使用：

　　@media screen and (min-width: 1024px) {

　　#main {min-width: 1000px;}

　　}

　　七、让大部分东西是相对的

　　让你整个Web元素都是相对的而不是绝对的，从这一个概念出发，我们可以给最外面的元素定义一个单位，然后其子元素和后代码元素都继承他。目前使用相对的单位有两种常见的：

　　百分比(%)方法：给主容器定认一个固定尺寸或者流体尺寸，然后给其每个子元素使用百分比(%)来计算各自的参数，比如说width/padding/margin等;

原文转自：http://www.ltesting.net