Responsive布局技巧

通过上面的介绍，大家对响应式设计有了一定的了解，但在实际制作中还是有一些布局技巧的： 在Responsive布局中，可以毫无保留的丢弃：

第一， 尽量少用无关紧要的div；

第二，不要使用内联元素（inline）；

第三，尽量少用JS或flash；

第四，丢弃没用的绝对定位和浮动样式；

第五，摒弃任何冗余结构和不使用100%设置。

有舍才有得，丢弃了一些对Responsive有影响的东东，那么有哪些东东能帮助Responsive确定更好的布局呢？

第一，使用HTML5 Doctype和相关指南；

第二，重置好你的样式（reset.css）；

第三，一个简单的有语义的核心布局；

第四，给重要的网页元素使用简单的技巧，比如导航菜单之类元素。

使用这些技巧，无非是为了保持你的HTML简单干净，而且在你的页面布局中的关键部分（元素）不要过分的依赖现代技巧来实现，比如说CSS3特效或者JS脚本。

说了这么多，怎么样的布局或者说HTML结构才是简单干净的呢？这里教大家一个快速测试的方法。你首先禁掉你页面中所有的样式（以及与样式相关的信息），在浏览器中打开，如果你的内容排列有序，方便阅读，那么你的这个结构不会差到哪里去。

Responsive设计——meta标签

最后还有一个不可或缺的东东，那就是meta标签，可以说，在响应式设计中如果没有这个meta标签，你就是蹩脚的，响应式设计就是空谈。

个meta标签被称为可视区域meta标签，其使用方法如下。

<meta name=”viewport” content=”” /> 在content属性中主要包括以下属性值，用来处理可视区域。

<img src="http://img.mukewang.com/53660f2c0001190005270386.jpg" />

在实际项目中，为了让Responsive设计在智能设备中能显示正常，也就是浏览Web页面适应屏幕的大小，显示在屏幕上，可以通过这个可视区域的meta标签进行重置，告诉他使用设备的宽度为视图的宽度，也就是说禁止其默认的自适应页面的效果，具体设置如下：

<meta name=”viewport” content=”width=device-width,initial-scale=1.0” /> 另外一点，由于Responsive设计是结合CSS3的Media Queries属性，才能尽显Responsive设计风格，但大家都清楚，在IE6-8中完全是不支持CSS3 Media。下面我们一起来看看CSS3 Meida Queries在标准设备上的运用，大家可以把这些样式加到你的样式文件中，或者单独创建一个名为“responsive.css”文件，并在相应的条件中写上你的样式，让他适合你的设计需求。

脚本下载地址：

media-queries.js(http://code.google.com/p/css3-mediaqueries-js/)

respond.js(https://github.com/scottjehl/Respond)

 <!—[if lt IE9]>
      <scriptsrc=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js></script>
 ​<![endif]>

Responsive设计——不同设备的分辨率设置

下面我们一起来看看CSS3 Meida Queries在标准设备上的运用，大家可以把这些样式加到你的样式文件中，或者单独创建一个名为“responsive.css”文件，并在相应的条件中写上你的样式，让他适合你的设计需求：

1.1024px显屏

@media screen and (max-width : 1024px) {
/* 样式写在这里 */
}
2.800px显屏

@media screen and (max-width : 800px) {
/* 样式写在这里 */
}
3.640px显屏

@media screen and (max-width : 640px) {
/* 样式写在这*/
}
4.iPad横板显屏

@media screen and (max-device-width: 1024px) and (orientation: landscape) {
/* 样式写在这 */
}
5.iPad竖板显屏

@media screen and (max-device-width: 768px) and (orientation: portrait) {
/* 样式写在这 */
}
6.iPhone 和 Smartphones

@media screen and (min-device-width: 320px) and (min-device-width: 480px) {
/* 样式写在这 */
}
现在有关于这方面的运用也是相当的成熟，twitter的Bootstrap第二版本中就加上了这方面的运用。大家可以对比一下：

@media (max-width: 480px)

@media (max-width: 768px)

@media (min-width: 768px) and (max-width: 980px)

@media (min-width: 1200px)

自由缩放属性resize

为了增强用户体验，CSS3增加了很多新的属性，其中resize就是一个重要的属性，它允许用户通过拖动的方式来修改元素的尺寸来改变元素的大小。到目前为止，可以使用overflow属性的任何容器元素。

在此之前，Web设计师为了要实现这样具有拖动效果的UI，使用大量的脚本代码才能实现，这样费时费力，效率极低。

resize属性主要是用来改变元素尺寸大小的，其主要目的是增强用户体验。但使用方法却是极其的简单，先从其语法入手。

resize: none | both | horizontal | vertical | inherit

取值说明：

属性值

取值说明

none

用户不能拖动元素修改尺寸大小。

both

用户可以拖动元素，同时修改元素的宽度和高度

horizontal

用户可以拖动元素，仅可以修改元素的宽度，但不能修改元素的高度。

vertical

用户可以拖动元素，仅可以修改元素的高度，但不能修改元素的宽度。

inherit

继承父元素的resize属性值。

例如：通过resize属性，让文本域可以沿水平方向拖大。代码为：

textarea { -webkit-resize: horizontal; -moz-resize: horizontal; -o-resize: horizontal; -ms-resize: horizontal; resize: horizontal; }