HTML5实践 -

下一站永远 · 发表于 2013-1-4 03:08:04

<div id="cnblogs_post_body">　　转载请注明原创地址：http://www.cnblogs.com/softlover/archive/2012/11/25/2787559.html

　　响应式web设计现在已经不是一个难事了，如果你还不熟悉他，可以参看我的文章《HTML5实践 -- 流式响应式设计》。如果你是一个初学者，可能响应式设计对你来说有点发杂，但实际上他比你想象的要简单的多。为了方便你更快的学习响应式设计，我特意写了这个教程，通过简单的三个步骤你就能掌握响应式设计的基本逻辑和media queries（假设你掌握css知识）。
　　demo预览地址：http://webdesignerwall.com/demo/responsive-design/index.html

　　步骤 1. Meta标签

　　大多数mobile浏览器，会将页面的宽度调整至viewport宽度，用以适应屏幕显示。这里我们会使用到viewport标签，例如下面的语句将添加在<head>之间，告诉浏览器使用设备的宽度作为viewport的宽度，取消initial scale的功能。
<div class="cnblogs_code"><meta name="viewport" content="width=device-width, initial-scale=1.0">

		自动登录	找回密码
密码			立即注册