响应式Web设计总结

响应式网页设计三步走

第一步. Meta 标签 (查看demo)

为了适应屏幕，多数的移动浏览器会把HTML网页缩放到设备屏幕的宽度。你可以使用meta标签的viewport属性来设置。下面的代码告诉浏览器使用设备屏幕宽度作为内容的宽度，并且忽视初始的宽度设置。这段代码写在 里面

1.

1.

第二步. HTML 结构

这个例子里面，有header、content、sidebar和footer等基本的网页布局。 header 有固定的高180px，content 容器的宽是600px，sidebar的宽是300px。

第三步. Media Queries CSS3 media query

响应式网页设计的关键。它像一个if语句，告诉浏览器如何根据特定的屏幕宽口来加载网页。

如果屏幕窗口小于980px，下面的规则就生效。在这里，我设置了容器的宽度为百分比的形式而不是像素单位，这样会更加灵活。

如果屏幕窗口小于700px，定义 #content 和 #sidebar 为自适应宽度，并移除它的浮动属性，这样它会全屏显示。

如果屏幕窗口小于480px (移动设备的屏幕)，设置#header 高为自适应，把h1字体设置为24px，并且隐藏#sidebar。

这些media query，你可以写很多。在这个demo，我只写了三个。media query的目的是应用不同

的CSS规则来实现屏幕的最佳布局。它可以写在同一个CSS文件，也可以写在不同的文件。

通过CSS3 Media Query实现响应式Web设计

概述

我们将范例页面的父级容器宽度设置为固定的980px，对于桌面浏览环境，该宽度适用于任何宽

于1024像素的分辨率。我们通过media query来监测那些宽度小于980px的设备分辨率，并将页面的

宽度设置由“固定”方式改为“液态”，布局元素的宽度随着浏览器窗口的尺寸变化进行调整。当可

视部分的宽度进一步减小到650px以下时，主要内容部分的容器宽度会增大至全屏，而侧边栏将被置

于主内容部分的下方，整个页面变为单栏布局。

HTML代码

我们将把注意力集中在页面的主要布局方面，并使用HTML5标签来更加语义化的实现这些结构，包括页头、主要内容部分、侧边栏和页脚：

1.

HTML5

IE是永恒的话题;对于我们使用的HTML5标签，IE9之前的版本无法提供支持。目前的最佳解决方案仍是通过html5.js来帮助这些旧版本的IE浏览器创建HTML5元素节点。在我们的页面HTML代码中调用该JS文件：

1.

CSS

HTML5块级元素样式

首先仍是浏览器兼容问题。虽然我们已经可以在低版本的IE中创建HTML5元素节点，但还是需要在样式方面做些工作，将这些“新”元素声明为块级：

1.article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,

section {

2. display: block;

3.}

主要结构的CSS

忽略细节，我们仍是将注意力集中在大问题上。正如在前文“概述”中提到的，默认情况下页面容器的固定宽度为980像素，页头部分(header)的固定高度为160像素;主要内容部分(content)的宽度为600像素，左浮动;侧边栏(sidebar)右浮动，宽度为280像素。

1.#pagewrap {

2. width: 980px;

3. margin: 0 auto;

4.}

5.

6.#header {

7. height: 160px;

8.}

9.

10.#content {

11. width: 600px;

12. float: left;

13.}

14.

15.#sidebar {

16. width: 280px;

17. float: right;

18.}

19.

20.#footer {

21. clear: both;

22.}

截至目前的效果演示

目前我们只是初步完成了页面结构的HTML和默认结构样式，当然，并不包括那些与话题无关的细节实现问题。正如可以在目前的演示中看到的，由于还没有做任何media query方面的工作，页面还不能随着浏览器尺寸的变化而改变布局。

CSS3 Media Query

终于开始说正事儿了。首先我们需要在页面中调用css3-mediaqueries.js文件，来帮助IE8或是之前的版本支持CSS3 media queries：

1.

2.

3.

接下来，我们要创建CSS样式表，并在页面中调用：

1.

当浏览器可视部分宽度大于650px小于980px时(液态布局)

◆将pagewrap的宽度设置为95%

◆将content的宽度设置为60%

◆将sidebar的宽度设置为30%

1.@media screen and (max-width: 980px) {

2.

3. #pagewrap {

4. width: 95%;

5. }

6.

7. #content {

8. width: 60%;

9. padding: 3% 4%;

10. }

11.

12. #sidebar {

13. width: 30%;

14. }

15. #sidebar .widget {

16. padding: 8% 7%;

17. margin-bottom: 10px;

18. }

19.

20.}

当浏览器可视部分宽度小于650px时(单栏布局)

◆将header的高度设置为auto

◆将searchform绝对定位在top 5px的位置

◆将main-nav、site-logo、site-description的定位设置为static

◆将content的宽度设置为auto(主要内容部分的宽度将扩展至满屏)，并取消float设置◆将sidebar的宽度设置为100%，并取消float设置

@media screen and (max-width: 650px) {

#header {

height: auto;

}

#searchform {

position: absolute;

top: 5px;

right: 0;

}

#main-nav {

position: static;

}

#site-logo {

margin: 15px 100px 5px 0;

position: static;

}

#site-description {

margin: 0 0 15px;

position: static;

}

#content {

width: auto;

float: none;

margin: 20px 0;

}

#sidebar {

width: 100%;

float: none;

margin: 0;

}

}

当浏览器可视部分宽度小于480px时

480px也就是iPhone横屏时的宽度。当可视部分的宽度小于该数值时，我们需要做以下调整：

◆禁用html节点的字号自动调整。默认情况下，iPhone会将过小的字号放大，我们可以通过-webkit-text-size-adjust属性进行调整。

◆将main-nav中的字号设置为90%

弹性图片

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

1.img {

2. max-width: 100%;

3. height: auto;

4. width: auto\9; /* ie8 */

5.}

弹性内嵌视频

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

1..video embed,

2..video object,

3..video iframe {

4. width: 100%;

5. height: auto;

6.}

iPhone中的初始化缩放

默认情况下，iPhone中的Safari浏览器会对页面进行自动缩放，以适应屏幕尺寸。我们可以使用以下的meta设置，将设备的默认宽度作为页面在Safari的可视部分宽度，并禁止初始化缩放。

1.

最终效果演示

该范例的最终演示正像我们在本文开始时看到的那样;另外记得，在条件允许的情况下，使用各种典型移动设备(iPhone、iPad、Android、Blackberry等)来检验页面的移动版本。

要点总结

Media Query JavaScript

对于那些尚不支持media query的浏览器，我们要在页面中调用css3-mediaqueries.js

1.

CSS Media Queries

实现自适应页面设计的关键之一，就是使用CSS根据分辨率宽度的变化来调整页面布局结构。

1.@media screen and (max-width: 560px) {

2.

3. #content {

4. width: auto;

5. float: none;

6. }

7.

8. #sidebar {

9. width: 100%;

10. float: none;

11. }

12.

13.}

弹性图片

通过max-width: 100%和height: auto实现图片的弹性化。

1.img {

2. max-width: 100%;

3. height: auto;

4. width: auto\9; /* ie8 */

5.}

弹性内嵌元素(视频)

通过width: 100%和height: auto实现内嵌元素的弹性化。

1..video embed,

2..video object,

3..video iframe {

4. width: 100%;

5. height: auto;

6.}

字号自动调整的问题

通过-webkit-text-size-adjust:none禁用iPhone中Safari的字号自动调整

1.html {

2. -webkit-text-size-adjust: none;

3.}

页面宽度缩放的问题

1.原文：https://www.wendangku.net/doc/9d16850203.html,/node/7/page/0/1

响应式Web设计的20个有用的jQuery插件FitText

Blueberry – A simple, fluid, responsive jQuery image slider

Response JS: mobile-first progressive enhancement in HTML5

The Heads-Up Grid

jQuery Masonry

Isotope

scrolldeck

Elastislide – A Responsive jQuery Carousel Plugin

Responsive Image Gallery with Thumbnail Carousel

Supersized – Full Screen Background Slideshow jQuery Plugin

PhotoSwipe

ResponsiveSlides.js

Automatic Image Montage with jQuery

Hoverizr – A responsive jQuery Image manipulation and overlay plugin

FitVids.JS

Doubletake

Adaptive Images in HTML

Convert a Menu to a Dropdown for Small Screens

十大响应式Web前端开发框架

网站设计如果单靠一个一个代码码出来效率就过于低下了，如果利用网上的一些资源，只需简单的几个步骤你就可创建出更具吸引力的设计，包括菜单、背景、动画、眉头、body等设计。响应式Web设计不仅能够适用于任何屏幕尺寸，还为用户带来更完美的体验，本文将分享十款最佳的响应式Web设计开发框架，助你大大提高工作效率。 Gumby Framework

Gumby 2是建立在Sass基础上的。Sass是一款非常强大的CSS 预处理器，允许用户自主快速的开发扩展Gumby，同时提供很多新的工具来自定义和扩展Gumby框架。Gumby 2是一个非常棒的响应式CSS框架。 Get UI Kit Get UI Kit是一款轻量级、模块化的前端框架，用于开发快四且强大的 Web界面。 Foundation

Foundation是一个易用、强大而且灵活的框架，用于构建基于任何设备上的Web应用。提供多种Web上的UI 组件，如表单、按钮、标签等。 Semantic

UI是Web的灵魂！Semantic是为攻城师而制作的可复用的开源前端框架。 提供各种UI组件，使得开发更加直观、易于理解。 52Framework

52 Framework主要用于优化HTML5和CSS3的跨浏览器兼容性的框架， 可在所有主流浏览器上运行。 PureCSS

Pure是一组小的、响应式CSS模块，可用于任意Web项目中。它可作为每个网站或Web应用的起步工具，帮助开发者处理应用程序所需的所有CSS工作，同时不会让每个应用千篇一律。 Responsablecss

基于HTML5的响应式Web页面重组适配技术研究_蒋凌燕

计算机与现代化 2015年第2期 JISUANJI YU XIANDAIHUA 总第234期 文章编号：1006- 2475（2015）02-0007-04收稿日期：2014-11-14作者简介：蒋凌燕（1979-），女，江苏南京人，南京工业职业技术学院计算机与软件学院讲师，硕士，研究方向：Web 开发技术； 查英华，副教授，硕士，研究方向：移动应用开发技术。 基于HTML5的响应式Web 页面重组适配技术研究 蒋凌燕，查英华 （南京工业职业技术学院计算机与软件学院，江苏南京210046） 摘要：在网页浏览和网站访问使用上，移动终端与PC 机终端相比，有显示屏幕大小不统一，页面布局不适应，噪声信息较多等问题，网络上海量的网站在移动终端访问时需将网页信息进行适配和重组。HTML5标准提供的新特性新标签可以更好地适应现今多终端访问的需求，采用响应式原则设计的页面在移动终端访问时也能提供给用户更好的服务和体验。本文提出一种方法，将已有的网站和网页通过前台框架技术进行Web 页面的重组和适配，从而转换成基于HTML5新标准的响应式页面，实现了基于HTML5的响应式Web 页面重组。网站可以更好地适应多终端访问，为用户提供更好的服务。关键词：页面重组；响应式；前台框架；HTML5中图分类号：TP393．09 文献标识码：A doi ：10．3969/j．issn．1006-2475．2015．02．002 Ｒecombination and Adaptive Technology of Ｒesponsive Web Pages Based on HTML5 JIANG Ling-yan ，ZHA Ying-hua （College of Computer and Software ，Nanjing Institute of Industry Technology ，Nanjing 210046，China ） Abstract ：In webpage browsing and Web accessing ，through the comparison between mobile terminal and PC ，it ’s found that the display screen size is not uniform ，the layout of the page does not adapt ，and the noise information is too great．So a great quanti-ty of website on network is need to transform and recombine the webpage information adaptively when accessed by the mobile ter-minal．The new label and features provided by HTML5can better adapt to the multi-terminal access needs ，the type of response page design principles in the mobile terminal access can also provide users with better service and experience．This paper presents a way which can translate existing website and webpage into HTML5-based response page by using framework of foreground tech-nology to recombine the webpage information adaptively．The website can be better adapted to the environment of multi-terminal access ，provide better service for user． Key words ：page recombination ；responsive ；framework of foreground ；HTML5 0引言 目前，移动互联网已经成为最大的信息消费市场、最活跃的创新领域、最强的ICT 产业驱动力 量———2013年全球移动业务收入达到1．6万亿美元，相当于全球GDP 的2．28%，全球智能手机出货量近10亿部，达到PC 的3倍；移动互联网重构了互联网服务的模式与生态，全球应用程序下载次数累计超 过5000亿［1］ 。 移动终端与个人电脑终端相比， 可视界面偏小，通常为几分之一，互联网上海量为个人电脑终端所设计的各种Web 系统在移动终端上显示时内容过多，网页布局和用户对网站功能的使用方面的设计也是针对大屏幕的，从适合个人电脑终端的Web 系统向适合 移动终端的系统上迁移时需要进行页面提取和重组。 1 页面重组技术 1．1 现状 Web 页面重组技术通过对现有网页信息的提 取、分离、转换、组合，能够提高网页网站的适应性，在多终端访问的环境下给用户以更好的体验，满足用户信息交流，更好体现网络服务的便捷性。 页面重组技术将原始页面经过重组处理，生成适合在移动终端显示的新页面。根据页面重组处理流程，页面重组技术主要包括页面信息提取技术和页面信息组合技术。页面信息提取技术主要通过对原始页面结构和内容2个方面进行提取。页面信息组合技术将传递来的内容块按照一定的规则进行组织显示。

响应式Web设计在移动终端的实践探索

计算机时代2018年第5期 0引言 我国移动互联网市场快速扩展，移动互联网设备不断更新，在这样的环境下，移动互联网的网站设计必须紧跟移动设备的硬件技术水平，完善网站与移动终端的贴合度。于是，如何将网站在不同的设备上展示给用户就是需要思考的问题。在理想状态下Web 设计可以根据用户的不同需求以及显示屏幕的不同分辨率展示不同的版本，为用户提供最佳的用户浏览体验[1]。但是显然，面对不断更新的硬件设备，Web的设计需要不断的更新，无疑会增加各项工作的成本。结合现有的技术，采取响应式Web设计可以很好地应对这一问题。在Web页面的设计和开发中，针对不同客户的需求，在命令网站针对移动终端设备上的硬件性能对自身的布局进行设计，通过这样的方式，移动终端可以得到最佳的Web展示。在响应式网页的设计中，主要涉及整合媒体查询、弹性视觉媒体和流动布局，通过以上的技术支持可以很好的解决不同终端设备的适应性问题。 1移动互联网和智能移动终端的发展现状 在现阶段的技术实力和市场需求的转变中，在网页设计领域正发生着不断的变化，在过去的一段时间里，PC作为主要展示网络页面的设备，在网页设计上可以主要考虑内容的因素，设备种类相对较少，网页设计过程中需要较少的设计方式。但随着移动互联网终端的发展，多种尺寸的屏幕，不同大小的分辨率，适当的Web设计成为市场的需求。 设计人员根据设计的理论提出了响应式Web的 DOI:10.16644/https://www.wendangku.net/doc/9d16850203.html,33-1094/tp.2018.05.008 响应式Web设计在移动终端的实践探索 郭飞军 (浙江国际海运职业技术学院，浙江舟山316021) 摘要：随着移动互联网的发展，Web设计也发生了很大的变化。目前的网页设计已无法与移动终端的硬件设计相适应，不同网页在不同设备上使用的兼容性问题逐渐暴露出来。这就要求网页能够自动切换分辨率、改变图片尺寸及相关脚本功能等，来适应不同设备。响应式Web设计理论应运而生，旨在解决现阶段网页设计在移动客户端上使用的问题。 通过Web设计的关键技术使网站能够动态地适应各类用户终端设备，从而满足各类用户的需求。 关键词：响应式Web设计；移动终端；流式布局；媒体查询 中图分类号：TN911.22文献标志码：A文章编号：1006-8228(2018)05-29-03 The practical exploration of the responsive Web design in mobile terminal Guo Feijun （Zhejiang International Maritime College,Zhoushan,Zhejiang316021,China） Abstract：With the development of mobile Internet,great changes have been taken place in the Web design.The design of webpage is no longer compatible with the hardware design of mobile terminal.The compatibility problem of displaying different web pages on different devices is gradually exposed,it is required that the web page can automatically switch the resolution, change the picture size and the related script functions to adapt to different devices.The theory of responsive Web design came into being,which aims to solve the problem of compatibility at present.The key technology of Web design enables the web site to dynamically adapt to all types of user terminal devices to meet the needs of all types of users. Key words：responsive Web design；mobile terminal；flow layout；media query ··29

浅谈响应式网站论文

浅谈响应式网页设计 [摘要]经过十多年的快速发展，中国的互联网如今已经日趋成熟。随着3G, 4G的发展 和移动通信及WEB2. 0技术的提升以及近年来各种移动智能设备的兴起，移动互联网 也即将会步入高速发展时期，成为一种大势所趋。这一来就使中国互联网的发展变得 更加丰富、多元化趋势。越来越多的用户拥有多种移动设备，像智能手机、平板电脑、智能手表等，在现今的大环境下移动设备正在普及并且正在逐渐超过PC设备，面对市场上移动设备的不断增多，同时伴随着各种设备屏幕的分辨率、尺寸和型号的越来越多，如何能够在不同屏幕、不同系统平台等环境下保持网页的一致性，满足用户的一 致体验这将成为了整个网页设计行业的一个新挑战。 据非官方调查，移动设备正在逐渐超过PC设备，如果数据属实那么无可置疑，以后我们的网页设计就应该实现响应式布局。设想一个在移动终端都不能正常显示的网页能 给公司企业带来的大概也只有负面的影响，所以为了避免这种情况能够使所有利用移 动设备访问网站的用户都能有最优最好的体验，响应式设计绝对是最好的一种选择. 【关键词】:设备响应式设计;Web设计;移动终端;动态网页 一、晌应式网页设计《Responsive Web design)的理念 页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是ipad，我们的页面都 应该能够自动切换分辨率、图片尺寸及相关脚本功能等.以适应不同设备;换句话说，页面应该有能力去自动响应用户的设备环魂。响应式网页设计就是一个网站能够兼容多 个终端，而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的 新设备做专门的版本设计和开发了。 其实这个是一个设计问题，既然是设计的问题，这里就会涉及到很多层面的角色，包括交互设计师，视觉设计师，前端工程师，后台开发工程师。交互设计师，要满足 各自不同分辨率和设备的页面布局展现方式。而视觉设计师，则要考虑到页面性能和 移动端带宽问肠，权衡下页面的酷炫效果和视觉色彩的运用。而前端和后台开发工程师，则要完成满足视觉需求和交互功能.更要考虑到页面加载性能和消耗带宽问题，更重要的是移动端安全性能方面!

基于HTML5的响应式网站的设计与实现(论文)正文

摘要 随着网络的发展和普及，各类建站技术的更新与运用，现在搭建一个网站的时间和成本越来越低，使得企业官方网站得到了极大的发展。从早期简单的网页展示，到后来的营销型网站，全网营销型网站，以及目前最新最主流的响应式网站。基于HTML5的响应式网站能够自动适应屏幕大小，实现多终端覆盖，设计高端，丰富的特效让页面展示更精美。 HTML5是HTML下一个主要的修订版本，现在仍处于发展阶段。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务RIA，如Adobe Flash、Microsoft Silverlight，与Oracle Java FX的需求，并且提供更多能有效增强网络应用的标准集。HTML5是新兴的Web开发技术，其拥有良好的语义化标签，搭配最新CSS3可以展现出无与伦比的显示效果。 本课题结合HTML5技术和eclipse开发工具，MySQL Server 作为数据库，实现了企业响应式网站及其管理，使得企业官网的展示更精美，管理更便捷。 关键词：HTML5；CSS3；JavaScript；MySQL Server；响应式网站

ABSTRACT With the development of network and popularization, the updating and use of all kinds of web technology, now time and cost of building a website has become more and more low, makes the enterprise's official website got great development. From the early simple web pages, to later marketing type site, the entire network marketing type site, and the reactive sites of the latest most mainstream. Based on the response of the HTML5 responsive website can automatically adapt to screen size, realize the end cover, high-end design, rich in specific page to show more elegant. HTML5 is HTML next major revision, now is still in the stage of development. Generalized when asked about it actually means, including HTML, CSS, and JavaScript, a set of technology combination. It hopes to be able to reduce the browser plug-in to need the richness of network application service RIA, such as Adobe Flash, Microsoft Silverlight, and the demand of the Oracle Java FX, and can provide more effective enhance the standard set of network applications. HTML5 is the emerging Web development technology, has good semantic labels, match the latestCSS3 can show a unique display effect. This topic combines the technique of HTML5 and the eclipse development tools, MySQL as the database Server, realize the reactive sites and its management, make enterprise website to show more elegant, more convenient management. Key words:HTML5; CSS3; JavaScript; MySQL Server; Reactive sites

响应式web网站设计制作方法

在研究响应式的时候，记录了一些感想，分享出来，抛砖引玉，希望可以和大家一起讨论。总结下来，响应式比之前想象的要复杂得多。 1. ie9以下（不包括ie9）采用ie条件注释，为ie8以及一下单独开一个样式文件 2. 一个模块的mq样式整体放在这个模块的样式的之后，符合层叠逻辑，也同时以免被层叠。 3. 祈求在一个相应点上同时做变化几乎是不可能的，因为版式中间的变化，无论是视觉还是具体的编码人员不可能掌握所有细节。 4. 流体布局很关键，%视父级为参照物，这一点虽然很多人都知道，但是实际做的时候却最容易被忽略。 5. 清除浮动也很重要，切记。 6. 如果你希望边框、边距（内、外）也在100%的范围内，直接设置width:auto就好了，不要给予希望在新的css3属性上，也不要寄希望在-webkit上，-webkit-很容易就会变成下一个ie6了。 7. 合理的嵌套更加健壮，用一个包装元素来替代设置当前元素margin或者padding。举例，假如有A和B两个元素，width是40%，maring-right是10%，这样很容易在搜索浏览器的时候篡位，所以用一个包装元素C去分别包裹A和B，然给给C设置50%，A和B分别设置为80%。这样就是合理且健壮的嵌套了。 8. 两行两列这种设计，由于流体布局和字数的不同，所以为每一行添加一个包装元素，更加健壮。也就是说，先做两行，再在每一行里做两列。 9. 不要奢望在在每一个像素的宽度上不会出现超出预期的表现，因为没有任何人知道页面在每一个像素宽度时候的表现的样子，页面越负责可预期的就越不准确。所以mq可能真的是“非预期数值”（预期数值指代在设计和实现之前约定的响应点） 10. 相同区间的mq和mq会层叠，全局的样式也会和mq中的样式层叠，所以属性尽量不要写成缩写。以减少忘记的风险。 11. 图片的自适应处理不容易，特别是有边框的，如果正常条件（没有利用mq来约束）下设置了宽和高，在另外一个mq下，仅仅设置一个属性是不行的，还是那句话，mq不是二选一（除非是两个不同的mq区间），而是层叠！！ 12. 如果水平列表的两端的元素两端对齐，以四个元素为例，那么除了前三个预留左边距，最后一个为零；或者第一个右边据为0；后三个有右边距以外。可以采用第一个左侧有，最后一个右侧有，中间两个左右偏移边距来做，短的一面为边距除以空白数，比如4个列表项，边距为40,则40除以3。好处么？就是可以保证每一个外包装为通栏的25%。 13. 四个25%，两个50% 没关系，但是50% 25% 25%就可能会掉下去最后一个，所以24.99，22.49有时还会相差1~2像素。 14. 如果版式变化不大，那么从大到小的写mq，不必写一个区间，只写最大值即可，这样一层一层的继承，小尺寸继承大尺寸，另外，不用过分担心选择器本身权重的问题，mq会提高其优先级。 15. 像导航和版权这种在pc、pad、phone截然不同的版式。mq，就写区间。这样在区间外就等于这些dom毫无样式，这样就不比担心由继承引发的覆盖、优先级、重写以及未知问题。减少了属性的重写，提高了效率、降低了修改成本。其实就是等于一个dom，为不同

响应式Web设计总结

响应式网页设计三步走 第一步. Meta 标签 (查看demo) 为了适应屏幕，多数的移动浏览器会把HTML网页缩放到设备屏幕的宽度。你可以使用meta标签的viewport属性来设置。下面的代码告诉浏览器使用设备屏幕宽度作为内容的宽度，并且忽视初始的宽度设置。这段代码写在 里面 1. 1. 第二步. HTML 结构 这个例子里面，有header、content、sidebar和footer等基本的网页布局。 header 有固定的高180px，content 容器的宽是600px，sidebar的宽是300px。 第三步. Media Queries CSS3 media query 响应式网页设计的关键。它像一个if语句，告诉浏览器如何根据特定的屏幕宽口来加载网页。

如果屏幕窗口小于980px，下面的规则就生效。在这里，我设置了容器的宽度为百分比的形式而不是像素单位，这样会更加灵活。 如果屏幕窗口小于700px，定义 #content 和 #sidebar 为自适应宽度，并移除它的浮动属性，这样它会全屏显示。 如果屏幕窗口小于480px (移动设备的屏幕)，设置#header 高为自适应，把h1字体设置为24px，并且隐藏#sidebar。

这些media query，你可以写很多。在这个demo，我只写了三个。media query的目的是应用不同 的CSS规则来实现屏幕的最佳布局。它可以写在同一个CSS文件，也可以写在不同的文件。 通过CSS3 Media Query实现响应式Web设计 概述 我们将范例页面的父级容器宽度设置为固定的980px，对于桌面浏览环境，该宽度适用于任何宽 于1024像素的分辨率。我们通过media query来监测那些宽度小于980px的设备分辨率，并将页面的 宽度设置由“固定”方式改为“液态”，布局元素的宽度随着浏览器窗口的尺寸变化进行调整。当可 视部分的宽度进一步减小到650px以下时，主要内容部分的容器宽度会增大至全屏，而侧边栏将被置 于主内容部分的下方，整个页面变为单栏布局。 HTML代码 我们将把注意力集中在页面的主要布局方面，并使用HTML5标签来更加语义化的实现这些结构，包括页头、主要内容部分、侧边栏和页脚： 1.