关于响应式Web设计技巧以及入门

　　html5和css3流行至今，我在做响应式的网站一直是在“尝试”的阶段。并没有深入的去研究和学习，浅显的理解就是根据屏幕分辨率的大小，网站布局、图片、文字大小等相应改变。以后使用平板、手机浏览网站的用户会越来越多，对于前端设计师，学好用html5、css3做响应式网站是势在必行。

　　响应式网页设计这个术语，由伊桑马克特提出，他在Alist Apart 发表了一篇开创性的文章，将三种已有的开发技巧（弹性网格布局、弹性图片、媒体和媒体查询）整合起来，并命名为响应式网页布局。还有一些其他叫法，如流式设计、弹性布局、塑料布局、流体设计、自适应布局、跨设备设计以及弹性设计。

　　以往我们显示针对桌面电脑来进行宽度设计，然后将其缩小并针对小屏幕进行内容重排；现在我们应该首先针对小屏幕进行设计，然后逐步增强针对大屏幕的设计和内容。

　　三个简单步骤，让你的网站变成响应式网站

　　ios和Android浏览器都基于Webkit核心。这两种浏览器以及很多其他浏览器如chrome、opera，都支持用viewport meta元素覆盖默认的画布缩放设置，只需要在html的标签中插入一个 标签。 标签中可以设置具体的宽度或者缩放比例。示例：

　　

　　分析：width=device-width告诉浏览器页面的宽度应该等于设备宽度；initial-scale=2页面的缩放比例，设置比例为设备尺寸的2倍；maximum-scale=3,允许用户将页面最多放大至设备宽度的3倍；user-scalable=no禁止用户缩放。缩放是一个重要的辅助功能，所以实践中很少禁用。

　　一：粘贴下面的代码到和标签之间:

　　

　　设置比例为1.0这表示浏览器将按照其视口的实际大小来渲染页面

　　二：针对不同视口宽度修正设计

　　设置viewport meta 标签后，现在我们针对不同视口修正设计效果，创建CSS样式表，并在页面中调用：

　　常见媒体查询

　　/* 平板电脑布局: 481px 至 768px。样式继承自: 移动设备布局。 */

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

　　.class{

　　background: #333;

　　}

　　}

　　/* 桌面电脑布局: 769px 至最高 1232px。样式继承自: 移动设备布局和平板电脑布局。 */

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

　　.class {

　　background: #666;

　　}

　　}

　　三：字体、弹性图片、视频

　　对于响应式网站来说应该有响应式的字体，一个响应式的字体大小应关联它的父容器的宽度，这样它才可以适应客户端的屏幕。

　　CSS3 规范引入了一个新的单位叫 rem，和 em 类相似，但相对于 HTML 元素来说， rem 更易于使用。

　　rem 是相对于 HTML 元素的，不要忘了重置 HTML 的字体大小：

　　html { font-size:100%; }

　　完成后，您可以定义响应式的字体大小，如下所示：

　　@media (min-width: 640px) { body {font-size:1rem;} }

　　@media (min-width:960px) { body {font-size:1.2rem;} }

　　@media (min-width:1100px) { body {font-size:1.5rem;} }

　　请注意，旧浏览器不支持 rem 单元，所以不要忘了实现一个替代。

　　弹性图片

　　我们需要为图片设置max-width:100%和height:auto，来实现其弹性化。对于IE，仍然需要一点额外的工作：

　　img {

　　max-width: 100%;

　　height: auto;

　　width: auto\9; /* ie8 */

　　}

　　弹性内嵌视频

　　同样的，对于视频，我们也需要做max-width： 100%的设置；但是Safari对embed的该属性支持不是很给力，所以我们以width： 100%来代替：

　　.video embed,

　　.video object,

　　.video iframe {

　　width: 100%;

　　height: auto;

　　}

　　参考网站：

　　1、黑色Html5个人博客模板主题《如影随形》

      2、《响应式纵向时间轴》

万晓博SEO推荐服务器：