响应式web网站设计制作方法
响应式网页设计入门教程
响应式网页设计入门教程第一章：什么是响应式网页设计在移动设备广泛使用的今天，响应式网页设计已经成为了设计师必备的技能之一。
响应式网页设计是指一种设计方法，通过使用弹性布局、媒体查询和其他技术手段，使网页在不同的设备上能够自动调整布局和样式，以适应不同的屏幕尺寸和分辨率。
第二章：响应式网页设计的优势2.1 更好的用户体验响应式网页设计能够使网页在不同设备上都能正常浏览，用户无论使用手机、平板还是电脑，都能够获得良好的阅读和操作体验，提升用户满意度。
2.2 统一的内容管理响应式网页设计只需要维护一个网站或应用，无需为不同设备创建独立的版本，大大降低了内容管理和维护的工作量。
2.3 更好的搜索引擎排名响应式网页设计能够提供更好的用户体验，对SEO优化也有积极影响。
搜索引擎更倾向于显示适应不同屏幕的网页，这意味着响应式网页更有可能获得更高的排名。
第三章：响应式网页设计的关键技术3.1 弹性布局响应式网页设计使用弹性布局是实现自适应效果的基础。
通过使用百分比和媒体查询等技术，使网页中的元素能够根据设备的屏幕尺寸和方向进行相应的调整，保持良好的显示效果。
3.2 媒体查询媒体查询允许网页根据不同的媒体类型和特性，应用不同的样式规则。
通过媒体查询，可以针对不同的屏幕尺寸、分辨率和方向等参数，定义不同的样式，实现响应式布局和自适应效果。
3.3 图片优化在响应式网页设计中，图片通常是页面加载速度比较慢的主要原因，因此需要对图片进行优化。
可以使用响应式图片技术，根据设备的屏幕尺寸和分辨率，加载不同大小的图片，有效提升网页的加载速度和性能。
3.4 触摸与点击事件由于移动设备无法使用鼠标进行操作，响应式网页设计需要考虑触摸和点击事件。
通过使用适当的触摸事件和点击事件，实现网页在不同设备上的操作逻辑和用户交互效果。
第四章：响应式网页设计的实践步骤4.1 设计网页布局在响应式网页设计中，首先需要设计网页的基本布局。
可以使用弹性网格布局等灵活的布局方式，确保网页能够适应不同的屏幕尺寸和方向。
响应式网页设计基础知识解读
响应式网页设计基础知识解读正文：一、什么是响应式网页设计响应式网页设计是一种能够根据用户设备的屏幕大小、分辨率和方向等特征，自动调整网页布局和内容的设计方法。
通过使用响应式设计，可以提供更好的用户体验，并确保网页在不同设备上均能正常显示。
响应式设计的核心理念是“一网适配多屏”，即使用户在不同屏幕上访问网页，也可以获得一致的视觉效果和操作体验。
二、响应式网页设计的实现原理1.媒体查询（Media Queries）：媒体查询是响应式网页设计的关键技术之一。
通过在CSS中使用媒体查询，可以根据设备特征设置不同的样式规则，以适应不同屏幕尺寸和特性。
2.流式布局（Fluid Layout）：流式布局是指使用相对单位（如百分比）而不是固定像素来设置元素的宽度。
这样，在不同屏幕大小的设备上，页面元素能够自动调整大小和位置，保证内容显示完整。
3.弹性图片（Flexible Images）：在响应式网页中，图片也需要适应不同的屏幕。
通过使用插图工具或CSS技术，可以使图片自动缩放并保持其比例，以便适应不同设备。
4.网页字体和排版（Typography and Grid System）：在响应式网页设计中，也需要考虑字体和排版的适应性。
通过使用相对单位设置文字大小和行间距，并选择适合不同屏幕的排版布局，能够提供更好的阅读体验。
三、响应式网页设计的优点1.提供更好的用户体验：响应式网页设计能够根据用户设备的特征自动调整网页布局和内容，使用户无论在何种设备上访问网页都能够获得良好的视觉效果和操作体验。
2.降低开发和维护成本：相比于为不同设备分别开发独立的网页，采用响应式设计可以省去重复的开发工作，并减少网页维护的工作量，从而降低了开发成本和时间。
3.提高网站的可访问性：由于响应式设计能够适应不同终端设备的特性，无论用户使用台式电脑、平板电脑还是手机等设备，都可以正常访问和浏览网页，提高了网站的可访问性。
4.有利于SEO优化：采用响应式网页设计可以避免内容重复和分流问题，提高网站的SEO排名。
前端开发实训案例构建响应式网页设计
前端开发实训案例构建响应式网页设计一. 案例介绍随着互联网的发展和用户需求的不断变化，响应式网页设计成为前端开发中的重要环节。
本文将通过一个前端开发实训案例，详细介绍如何构建一个响应式网页设计。
二. 实训需求分析1. 了解实训目标：明确实训的目的，是为了提高学生对响应式设计的理解和实践能力。
2. 分析用户需求：根据用户群体的特点和需求，确定实训案例的具体内容。
3. 设计网页结构：确定网页的布局和整体框架，包括导航栏、内容区域、底部等。
三. 网页设计与开发1. 响应式设计理念：介绍响应式设计的概念和原理，包括流动网格、弹性图片和媒体查询等。
2. HTML结构设计：使用语义化的HTML标签，按照网页结构要求进行标签的嵌套和布局。
3. CSS样式设计：通过CSS选择器和属性设置，对网页的样式进行定制化设计，包括颜色、字体、背景等。
4. 媒体查询技术：利用媒体查询技术，根据不同设备的屏幕尺寸和显示能力，调整网页布局和样式。
5. 图片和多媒体元素：优化图片和多媒体元素的加载和显示，提高网页的性能和用户体验。
四. 响应式网页实施与测试1. 响应式布局测试：使用不同尺寸的设备进行网页布局测试，包括桌面、平板和手机等。
2. 浏览器兼容性测试：在不同的浏览器和版本上进行兼容性测试，确保网页在各种环境下的正常显示。
3. 设备适配性测试：测试网页在各种设备上的适配性和用户体验，包括操作便捷性和页面加载速度等。
4. 调试与优化：根据测试结果进行网页的调试和优化，修复存在的Bug和提升网页的性能。
五. 实训心得与总结通过本次前端开发实训案例，我深刻理解了响应式网页设计的重要性和实践技巧。
在实践过程中，我学会了使用HTML和CSS创建网页结构和样式，并运用媒体查询和优化技巧实现网页的响应式设计。
通过测试和调试，我进一步提升了网页的兼容性和用户体验。
实训过程中遇到的问题和解决方法也使我得到了成长和进步。
六. 结束语通过这个实训案例，我深刻认识到前端开发中响应式网页设计的重要性，它能够为用户提供更好的访问体验，适用于不同的设备和屏幕尺寸。
响应式网站建设运营方案
响应式网站建设运营方案第一部分：引言在移动互联网时代，越来越多的消费者选择使用移动设备访问网页。
因此，建立一个能够适应各种屏幕大小和设备类型的网站变得至关重要。
响应式网站是一种可以自动调整布局和内容以适应不同设备的网站。
本方案将介绍响应式网站的建设和运营策略。
第二部分：建设策略2.1 目标设定建设一个响应式网站的首要任务是明确目标。
公司或组织需要确定以下几个因素：- 网站的受众人群- 网站的主要目标（销售产品、提供信息、推广活动等）- 网站的核心功能和特色2.2 网站设计在设计响应式网站时，需要考虑以下几个方面：- 界面布局：确保网站能够根据不同设备的屏幕大小和方向进行自适应调整。
- 图片和媒体：优化图片和媒体文件的大小，以适应移动设备的带宽和屏幕分辨率。
- 导航和菜单：设计简洁易用的导航和菜单，以提升用户体验。
- 字体和排版：选择适合不同屏幕尺寸的字体和排版样式。
2.3 技术选择建设响应式网站涉及到一些前端开发技术和框架。
以下是常用的技术和框架：- HTML5和CSS3：这些是构建网页的基础技术，可以实现响应式布局和动画效果。
- 响应式网格系统：使用响应式网格系统可以快速构建适应不同屏幕大小的网页布局。
- 媒体查询：媒体查询可以根据不同设备的特征（如屏幕分辨率）加载不同的样式表。
- CSS框架：一些成熟的CSS框架（如Bootstrap或Foundation）提供了响应式网站模板和组件，方便开发者快速构建网站。
2.4 测试和优化在建设过程中，需要进行多种设备的测试，以确保网站在不同设备和浏览器上的表现良好。
同时，通过分析用户行为和数据，可以不断优化网站的性能和用户体验。
第三部分：运营策略3.1 内容管理对于响应式网站的运营来说，内容是至关重要的。
以下是一些内容管理的策略：- 定期更新：保持网站内容的新鲜和有趣，定期发布新的文章、产品或活动信息。
- SEO优化：优化网站的关键词和描述，以提高搜索引擎排名。
教你使用Dreamweaver进行响应式网站开发
教你使用Dreamweaver进行响应式网站开发一、Dreamweaver简介Dreamweaver是一款由Adobe公司开发的网页设计和开发工具，可用于创建和管理响应式网站。
它通过直观的界面和强大的功能，帮助开发人员轻松实现对不同设备和屏幕分辨率的适应。
二、创建新的响应式网站1. 打开Dreamweaver软件，点击"文件"->"新建"->"网站"。
2. 在“网站基本信息”中，填写项目名称、本地文件夹和远程服务器信息等，然后点击“下一步”。
3. 在“建立基本网页”中选择响应式布局，并选择适合的网格系统。
4. 定义媒体查询规则，可根据需要添加不同的断点，并调整布局和样式。
5. 点击“创建”按钮，Dreamweaver将自动生成响应式网站的初始文件。
三、布局和样式设计1. 使用视图面板可以快速切换不同设备的预览模式，如桌面、平板和手机。
2. 在设计视图下，可以拖拽元素到页面上进行布局设计。
可以使用各种工具和面板来设计页面的样式。
3. 使用CSS面板来编辑样式，可以为不同的媒体查询添加自定义样式。
4. 使用Dreamweaver的网格系统，可以轻松实现元素的栅格布局。
5. 使用“适应性设计”功能可以根据屏幕分辨率调整布局和样式，以提供更好的用户体验。
四、添加多媒体内容1. 可以使用插入菜单中的多媒体选项来添加图片、视频和音频等内容。
2. 可以使用多媒体面板来管理添加的多媒体文件。
3. 可以通过设置属性来调整多媒体文件的大小、比例和样式。
4. 使用Dreamweaver的响应式功能，可以根据不同设备的屏幕分辨率和尺寸来自动调整多媒体内容的布局和样式。
五、添加交互功能1. 可以使用Dreamweaver提供的交互工具来添加按钮、表单和导航菜单等交互元素。
2. 使用行为面板，可以为交互元素添加各种动作和事件，如点击、悬停和提交表单等。
响应式Web设计的关键技术有哪些
响应式Web设计的关键技术有哪些在当今数字化时代，互联网已经成为人们生活和工作中不可或缺的一部分。
随着移动设备的广泛普及，用户访问网站的方式变得越来越多样化，从传统的桌面电脑到平板电脑、智能手机等各种尺寸和分辨率的设备。
为了确保网站能够在不同的设备上提供良好的用户体验，响应式 Web 设计应运而生。
那么，响应式 Web 设计到底依靠哪些关键技术来实现呢？首先，灵活的网格布局是响应式 Web 设计的基础。
传统的固定宽度布局在应对不同屏幕尺寸时往往显得力不从心，而网格布局则可以根据屏幕的大小自动调整页面元素的排列方式。
通过将页面划分为一系列的列和行，并且使用相对单位（如百分比）来定义元素的宽度，使得页面能够在不同设备上自适应地展示。
例如，在大屏幕上可以显示多列内容，而在小屏幕上则自动调整为单列显示，保证内容的可读性和可用性。
其次，媒体查询（Media Queries）是实现响应式设计的核心技术之一。
媒体查询允许我们根据设备的特性（如屏幕宽度、分辨率、方向等）来应用不同的 CSS 样式。
通过编写一系列的媒体查询规则，我们可以为不同的设备定制特定的布局、字体大小、颜色等样式。
比如，当屏幕宽度小于 600 像素时，我们可以隐藏侧边栏，增大字体，以适应小屏幕的显示。
再者，弹性图片和视频也是响应式设计中不可或缺的一部分。
在传统的网页设计中，图片和视频往往具有固定的尺寸，这在不同屏幕上可能会导致显示问题，如图片过大或过小。
为了解决这个问题，我们可以使用 CSS 的`maxwidth: 100%｀属性来确保图片和视频能够根据其容器的大小自动缩放，而不会超出屏幕范围。
同时，对于高分辨率的屏幕，还可以通过媒体查询为其提供更高清晰度的图片资源，以提升视觉效果。
除了上述技术，响应式字体也是需要重点关注的。
字体的大小和行高应该能够根据屏幕的尺寸和分辨率进行自适应调整，以保证文字的易读性。
可以使用相对单位（如 em 或 rem）来定义字体的大小，并且结合媒体查询来在不同设备上设置合适的字体样式。
响应式网站设计稿范例
响应式网站设计稿范例在当今高度数字化的世界中，网站已成为个人和企业展示及推广自己的重要方式。
而响应式网站设计作为一种新兴的趋势，已经成为设计师们追求的目标。
本文将为大家介绍一个响应式网站设计的范例，以帮助读者更好地理解这一概念以及如何实现。
【正文部分】我们选取的设计范例是一个在线购物网站。
该网站的目标受众是年轻消费者群体，因此设计以时尚、清新和易于导航为重点。
秉承响应式网站设计的原则，该网站的布局会在不同设备上自动适应，为用户提供一致且优质的浏览体验。
在手机端，该网站的布局简洁而直观。
顶部的导航菜单以一个可折叠的按钮形式展示，以充分利用有限的屏幕空间。
主页的焦点内容是一个轮播图，以滑动的方式展示不同的产品推荐。
下方则是一系列分类标签，用户可点击以浏览不同的商品类别。
整体布局简洁明了，用户可以通过滑动手势轻松浏览页面内容。
而在平板和台式机设备上，该网站的布局则更加丰富和复杂。
导航菜单展示为一行水平导航条，产品推荐区域以网格状展示，带有图片和文字描述。
随着鼠标滚动，用户可以看到更多的商品分类和详细信息。
此外，网站还提供产品搜索栏和购物车图标，以便用户快速找到自己想购买的商品，并将其加入购物车。
无论在哪种设备上浏览，该网站都保持了一致的设计风格和用户体验。
通过采用响应式设计，用户可以以各种设备浏览网站，而不必为适应不同的屏幕尺寸而感到困惑或不便。
这种设计方式充分考虑了用户的需求，提供了流畅、直观和一致的体验。
此外，在网站的底部还提供了其他重要的信息和功能，比如联系方式、帮助中心链接以及社交媒体图标等。
这些信息和功能的设置能够使用户更好地了解产品和公司，并提供更多的互动渠道。
在设计这个响应式网站时，我们还特别注意了网站的加载速度和性能。
大量使用了压缩和优化图片，以减少页面加载时间。
同时，也采用了分段加载和延迟加载的技术，以保证页面的快速响应和流畅滚动。
总的来说，这个响应式网站设计范例展示了如何通过合理而灵活的布局来适应不同设备的显示，以提供一致的用户体验。
基于HTML5的响应式网站的设计与实现正文
基于HTML5的响应式网站的设计与实现正文HTML5是一种新一代的网页标准，具有更灵活、更强大的功能，使网站在不同设备上都能够自适应地展示内容。
本文将介绍基于HTML5的响应式网站的设计与实现。
一、设计阶段在设计阶段，需要考虑以下几个方面：1.布局设计：响应式网站的布局应能适应不同屏幕尺寸的设备，包括桌面、平板和手机等。
可以采用流式布局，通过CSS媒体查询来实现不同屏幕尺寸下的样式调整。
2. 图片处理：响应式网站需要考虑到不同设备上的加载速度和显示效果。
可以使用CSS的background-image属性来实现灵活的背景图片，也可以使用srcset属性来指定不同分辨率的图片。
3.导航设计：响应式网站应能够在小尺寸设备上提供便捷的导航方式。
可以采用隐藏式菜单、下拉菜单或滑动菜单等方式，以提供更好的用户体验。
4. 字体处理：在不同设备上，字体尺寸和行距的显示效果可能会有所不同。
可以使用CSS的rem单位，根据屏幕尺寸动态调整字体大小。
二、实现阶段在实现阶段，需要使用HTML5和CSS3来完成网站的开发。
以下是一些常用的技术和方法：3. 弹性布局：使用CSS3的弹性布局（flexbox）可以简化网页布局的实现，并且可以自动适应不同屏幕尺寸。
4. 响应式图片：可以使用CSS的background-image属性来实现响应式图片，也可以使用srcset属性来指定不同分辨率的图片。
5.响应式导航：可以使用隐藏式菜单、下拉菜单或滑动菜单等方式来实现响应式导航。
6. 字体调整：可以使用CSS的rem单位来根据屏幕尺寸动态调整字体大小。
7. 媒体查询事件：可以使用JavaScript监听媒体查询事件，根据不同屏幕尺寸来执行相应的操作。
通过以上技术和方法的应用，可以实现一个基于HTML5的响应式网站。
这样的网站不仅能够在不同设备上提供良好的用户体验，还能适应不同屏幕尺寸下的展示要求。
总结：本文介绍了基于HTML5的响应式网站的设计与实现。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
在研究响应式的时候，记录了一些感想，分享出来，抛砖引玉，希望可以和大家一起讨论。
总结下来，响应式比之前想象的要复杂得多。
1. ie9以下（不包括ie9）采用ie条件注释，为ie8以及一下单独开一个样式文件<!--[if lt IE 9]><link href="lt9.css" rel="stylesheet" type="text/css"><![endif]-->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，为不同的设备写不同的样式，这些样式之间不继承。
16. 如果你希望几个元素是相对位置不变的话，请将他们包裹，通过这个包裹元素使他们整体与其他元素或元素组做排版，所以一个健壮的响应式离不开这些看似“冗余”的包裹元素。
但还是以最少的可实现目标的dom层级为目标。
17. 关于背景图，以中心为原点进行“裁剪”是理智的，已某一侧为原点看起来都有点怪。
另外可以使用background-size某个值为auto，另外一个使用%18. 大图片请写在一个mq区间内，不要只写最大值，这样会搞定按需加载的问题。
19. banner样式实践@media (min-width:1110px){.banner{height:684px; background:url(img/banner1980.jpg) center center no-repeat; background-size:auto 100%;}}/*高度一直填充，两侧裁剪，这种体验先看比较好*//*以下不同目标分辨率载入不同的图片，保证k数最佳，裁剪体验应该一致*/@media (min-width:769px) and (max-width:1110px){.banner{height:383px; background:url(img/banner1110.jpg) center center;}}@media (min-width:569px) and (max-width:768px){.banner{height:265px; background:url(img/banner768.jpg) center center;}}@media (min-width:415px) and (max-width:568px){.banner{height:196px; background:url(img/banner568.jpg) center center;}}@media (min-width:321px) and (max-width:414px){.banner{height:143px; background:url(img/banner414.jpg) center center;}}@media (max-width:320px){.banner{height:111px; background:url(img/banner320.jpg) center center;}}20. logo如果是在banner的背景图上镂空，这样是不推荐的。
在缩小浏览器窗口宽度的时候，给人以很明显很明显的视觉差，感觉页面极其不健壮（至少我的感觉是这样），似乎有随时要散的感觉。
文字也有这感觉，特别是有大量文字的时候。
所以你会发现很多响应式好的网站，他的导航的底色都是纯色。
logo和导航都不镂空在一张背景图上。
当然也有少数在的，比如adobe。
21. 接20，一般banner图片几乎是满屏的可能高达1980px；而一般如果是居中的话，我们把导航和logo以及一些小功能，比如登录、搜索控制在1200px最大宽度，当页面大于这个最大宽度的时候，这个区域就像钉在了背景图上，不会导致有两个图层的感觉。
所以当页面宽度马上等于最大宽度的时候，我们在利用mq重新写定义下一这个区域的最大宽度，当然是该小一点，这样就解决了20出现的那个问题。
22. png8的问题，ie6下就用纯色做底吧。
我最理想的想法是，当用ie6访问所有公司web 产品的时候，给用户一个页面，先登录QQ帐号，然后下载最新的QQ浏览器，然后发这个用户10个Q币。
然后浏览器界就清静了。
23. 接21，当前mq中的这个区域的最大宽度等于下一个（更小的一个尺寸）mq的尺寸，这样就用户的钉在了背景图的上面了。
24. 对于相同的一些元素，某一个有特殊的样式，优先使用nth-of-type选择器。
在测试ie8以及一下的时候，再为这个特殊的dom添加一个class之类，然后再在那个ie8以及一下的样式表中书写复制响应的规则。
25. body下有一个包裹元素，作为整体弹性的参照，为ie6、ie7单独写一个宽度，为什么是1000px，由于很难获得使用ie6的用户的分辨率，或者说获取了之后可能因为数据繁多不好决策，所以简单粗暴，认为使用ie6的都是低端设备用户，是小显示器用户，是1024*768分辨率；至于ie7，设置了4个25%的浮动，在缩小浏览器的过程中都能时不时的掉下去一个，对于小数点的像素就自动向上补全，太悲哀了。
所以如下：regular css file.layout{width:100%; max-width:1980px; min-width:320px;*zoom:1; margin:0 auto;}lt9 css yout{*width:1000px; min-width:1000px;}/*ie8的最小宽度为1000px，ie7 6只有1000px*/26. 对于一定要百分之百通栏的模块，比如，带有背景色的版权，或者banner，那么可以在lt9的文件夹里为ie7 6写一个不是只有1000px，而是可以100%的样式，但是切记这里只要有一列，否则就又产生了25中提到的问题，也许，你可以这么写：lt9 css file.layout{*width:1000px; min-width:1000px;}/*ie8的最小宽度为1000px，ie7 6只有1000px*/.one-percent{width:100%;}/*新增的，一定要在layout的后面，否则对于ie6 7不生效*/html dom<div class="layout one-percent"><!--code--></div>所以我建议，把banner 主体部分版权三者用三个layout包裹，这样便于对ie6 ie7 ie8做样式。
27. 经过长达半年的持续统计，1366px用户最多，根据栅格化，n=24为基准，得出W=(A*n)-i，所以如果要设置最大宽度则设置为1310px；a=45px,i=10px；不过由于与门户和电商等网站的排版不同且主要为了弹性版式，所以这里最大宽度是我们所需要的，至于45px和10px，以后有固定版式的话可以使用。
28. 响应点：1366px 1200px 1110px 768px 568px 414px 320px；768以下的很好理解也方便约束，PC侧的响应点是较难控制的，所以前面三个值基本都是按照版式来操作的。
原因参见3。
29. 有的人说写响应式从小往大写，意思是说先写手机端，然后写PC端，大致的原因是从大往小写的话，手机就要层叠和重写很多样式，可能会影响性能。
理论上，我是赞成的，实际上我并没有测试过到底性能有多么影响。
但是单单从布局的角度上讲，从设计的角度上讲，至少我的逻辑是从大往小写，因为小的基本都是在大的基础上做删减和布局的变化，所以写的时候逻辑比较顺畅。
不过无论从大到小，还是从小到大，自己顺手就好。
一般视觉都会先设计PC的，然后考虑mobile是什么样的，这一点也使得我是从大到小的去写。