响应式布局

今天模拟了一个类似bootstrap的简单的响应式布局，主要用了calc()/css3/，@media,
针对电脑设备、平板电脑、手机的屏幕大小不同，可以使用@media screen and (){}
eg:@media screen and (min-width: 768px){
body{color:black;}
}
当屏幕大小大于768px的时候，body元素的字体颜色就会变成黑色；相反，如果改成
@media screen and (max-width: 768px){
body{color:red;}
}
当屏幕大小<=768px的时候,body元素的字体颜色就会变成红色；
而响应式布局简单来说就是根据屏幕大小的不同改变盒子所占列的比例，以更舒适的方式向用户展现。



上图是模仿总列和为12的布局，但是有一个问题，当我为每个盒子分配好width后，想为每个盒子增加边距，让它看起来更舒服些，可是这样就与原来的布局不一样了，因为加了边距后，原本属于最后一列的盒子就跑到下一行去了，那想拥有原来的布局，而又能增加边距，怎么做呢。这时候就需要calc()了，用width:calc(原本占的宽度百分比-边框/内边距/外边距）

例如原来的盒子宽度是要占30%，而内边距为2，则实际宽度可用width:calc(30%-4px)/2x2=4/表示。

结果修改后就变成



还有一个也是关于响应式布局的css3重要属性,box-sizing;
当box-sizing的值为border-box时，宽度包括内边距+内容+边框；
当值为content-box时，宽度和高度即为内容，内边距和边框在内容之外。

更多相关内容可参考：
calc()用法：http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html;

bootstrap:http://www.bootcss.com/;

demo:http://fishlao.github.io/baiduex/Index.html

标题