CSS3 利用 @media 查询 实现响应式布局 及 CSS3 box-sizing属性

CSS3媒体查询，实现响应式页面

• @media 查询，可以针对不同的媒体类型（print：用于打印机或打印预览 、 screen：用于电脑,屏幕,平板电脑,智能手机等、speech：用于屏幕阅读器的发生设备）定义不同的样式。
• @media 可以针对不同的屏幕尺寸设置不同的样式，特别是设置设计响应式的页面。
• 当重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

@media查询的使用语法

1. 针对不同的媒体，使用不同的样式

@media mediatype and|not|only (media feature) { CSS-Code;}

1. 也可以针对不同的媒体使用不同的样式表 :

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

CSS3 box-sizing属性

box-sizing属性可以为三个值之一： content-box（default）， border-box， padding-box。

• content-box: border 和 padding 都不会计算入 width 之内

浏览器对盒模型的解释遵从 W3C 标准，改变一下 padding 或 border 的值，会导致 box 总尺寸发生变化，想要不影响页面的整体布局，就不得不重新计算 box 的 width值

• padding-box: padding 会计算入 width 内

改变 padding 值不会导致 box 总尺寸发生变化，但增加 border 会加大box总尺寸

• border-box: border 和 padding 都计算入 width 之内

浏览器对盒模型的解释与 IE6 相同，它的好处：无论如何改动 border 与 padding 的值，都不会导致 box 总尺寸发生变化，也就不会打乱页面整体布局。

试用这个新属性，

• Firefox 请使用 -moz-box-sizing，
• Safari / WebKit 请使用 -webkit-box-sizing，
• 其它浏览器直接用 box-sizing 即可。