html手机响应式布局,手机网页设计中的响应式布局

随着各种特性和智能手机浏览器的发展，网页能够根据设备显示变得很重要。我们不用再根据桌面浏览器窗口尺寸建立网站，然后让它们在更小的移动浏览器上渲染。现在，我们可以让元素大小和布局针对设备作出改变。

在Css2中,我们可以通过特殊的CSS后缀实现不同的媒体类型，比如印刷、演讲和屏幕显示。默认情况下，网页即为屏幕显示。另外一个比较有用且流行的媒体类型是印刷，它为优质的网面打印创建一个分离的设计。我们可以告诉浏览器仅仅在打印时使用CSS规则。

当从浏览器转到打印机的时候，这里有一些可以优化的地方，以保证输出具有更佳品质的内容：

1、移除背景图像;

2、移除主要的导航链接;

3、重建头部和页脚，使其更加合理;

4、将文本和链接改为黑色和白色;

5、将字体大小设置为打印的基础单位，例如12px;

6、加粗文字中的链接;

7、通过content属性自动打印URLa:link:after{content:"("attr(href)")";}

8、将内容区域进行扩展，使其充分利用打印页面。

适应媒体查询

CSS3 扩展了媒体类型的概念以检查特定的屏幕尺寸，所以样式表在做一个设计时可以更精确。例如，为了将一组CSS 规则应用到小屏幕的移动设备上，使用@media 规则设置那些CSS 声明，从而设置两个屏幕交付与视口大小:

// regular, default CSS rules go here for browsers that don't understand basic layout.

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

// CSS rules go here

}

通过这种方法，只有在视口或浏览器窗口至少为480 像素时，我们才可以告诉浏览器应用CSS规则。

为多种类型的屏幕(从移动设备的屏幕到桌面计算机的屏幕)设置样式：

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

// CSS rules go here

}

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

// CSS rules go here

}

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

// CSS rules go here

}

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

// CSS rules go here

}

这便可以为不同视口应用相同的设计，如图12.24让你示。

自适应和响应式的不同之处在网页设计中，自适应和响应式有着很明显的区别。自适应倾向于针对不同的断点产生特定的、定制的设计。这些视图常常是适应像桌面、平板电脑和移动设备这样大的物体。

流式布局

我们在这一章的前面部分创建两栏和三栏布局的时候，创建了固定和流式两个版本。现在，我们可以进一步看到在处理响应式设计时的不同以及流式布局的优点。

尽管断点可以让我们将设计适应当前常用的视口宽度。通过为元素设置成比例的宽度，它们就可以根据渲染时视口的宽度进行浮动。

因为一个新媒体通常是被之前媒体的元素所限制的，所以设计网页的印刷设计人员将印刷项目中固定设置和精确布局的想法带到了网页设计中。

div.container{margin:0 auto; width:960px;}  div.main{width:600px;float:left;}  div.asi