浅谈响应式网站论文
响应式设计实践心得体会
随着互联网技术的飞速发展，移动设备逐渐成为人们获取信息、进行交流的主要工具。
在这个背景下，响应式设计应运而生，成为网站和移动应用设计的重要趋势。
作为一名设计师，我有幸参与到响应式设计的实践中，以下是我在实践中的一些心得体会。
一、认识响应式设计响应式设计（Responsive Design）是一种能够根据不同设备屏幕尺寸和分辨率自动调整布局、字体大小、图片大小等元素的设计方法。
它能够确保网站或应用在不同设备上都能提供良好的用户体验。
响应式设计主要基于以下几个原则：1. 响应式布局：通过CSS媒体查询等技术，根据设备屏幕尺寸调整网页布局。
2. 流式布局：利用百分比、em、rem等相对单位，使网页元素在浏览器中自动缩放。
3. 响应式图片：通过CSS背景图片、图片标签的srcset属性等，实现图片在不同设备上的自适应。
4. 响应式字体：使用相对单位如em、rem等，使字体大小在不同设备上保持一致性。
二、响应式设计实践心得1. 布局设计在响应式设计中，布局设计是关键环节。
首先，要明确目标用户群体和主要使用设备，然后根据不同设备的特点，设计适合的布局。
以下是我总结的几点布局设计心得：（1）简洁明了：布局要简洁，避免过于复杂的结构，使用户能够快速找到所需信息。
（2）层次分明：合理划分页面层次，突出重点内容，方便用户浏览。
（3）适应性强：布局要能够适应不同屏幕尺寸，保证在各类设备上都能保持良好的视觉效果。
2. 媒体查询媒体查询是响应式设计中的核心技术，它能够根据不同设备屏幕尺寸和分辨率调整样式。
以下是我总结的几点媒体查询使用心得：（1）合理设置断点：根据目标设备和用户需求，设置合适的断点，确保在不同设备上都能提供良好的用户体验。
（2）简洁明了：媒体查询中的样式尽量简洁，避免过多的嵌套和冗余代码。
（3）性能优化：尽量使用CSS选择器而非JavaScript进行样式调整，提高页面加载速度。
3. 响应式图片响应式图片是响应式设计中的一大亮点，以下是我总结的几点响应式图片使用心得：（1）优化图片格式：根据不同设备屏幕尺寸，选择合适的图片格式，如WebP、JPEG、PNG等。
前端技术专业毕业论文
前端技术专业毕业论文标题：基于前端技术的响应式网页设计摘要：随着移动设备的普及和互联网的快速发展，响应式网页设计成为了当前前端技术的热点研究方向之一。
本文从响应式网页设计的定义、优势以及常用的前端技术等方面展开研究，旨在探讨如何利用前端技术实现优质的响应式网页设计。
关键词：响应式网页设计、前端技术、移动设备、互联网、优势一、引言随着移动设备（如智能手机和平板电脑）的普及，越来越多的用户选择通过移动设备来浏览网页。
然而，由于移动设备屏幕尺寸和分辨率的多样性，传统的固定网页设计往往无法正常展示在移动设备上，给用户带来不便和不良的用户体验。
为了解决这个问题，响应式网页设计应运而生。
二、响应式网页设计的定义响应式网页设计是一种通过使用灵活的网页布局和CSS媒体查询等前端技术，使网页能够根据用户使用的设备的屏幕尺寸和分辨率进行自适应调整的一种设计方式。
也就是说，无论用户是在桌面电脑、手机还是平板电脑等设备上访问网页，响应式网页设计能够使网页自动适应不同设备的屏幕大小，提供更好的用户体验。
三、响应式网页设计的优势1.良好的用户体验：响应式网页设计能够根据用户使用的设备自动调整布局和内容，使用户无论在何种设备上浏览网页，都能够获得良好的用户体验。
2.提高网页的可访问性：响应式网页设计可以使网页适应各种设备的屏幕尺寸和分辨率，使残障人士和老年人等特殊用户群体也能够轻松访问网页。
3.提高网页的可维护性：采用响应式网页设计，一个网页可以适应不同设备的不同尺寸和分辨率，相比于为每个设备单独设计网页，减少了网页开发和维护的工作量。
4.搜索引擎优化：响应式网页设计能够提供一套统一的网页内容，有利于搜索引擎进行索引，提高网页在搜索引擎结果中的排名。
四、常用的前端技术1.HTML5和CSS3：HTML5和CSS3是响应式网页设计中最基础的两个技术，提供了丰富的布局和样式选择，以及媒体查询等功能，用于实现响应式网页布局和自适应调整。
web前端的毕业论文
web前端的毕业论文题目：探究Web前端的响应式设计技术在现代网页开发中的应用摘要：随着移动互联网时代的到来，用户对于网页设计的要求也不断地提高。
Web前端响应式设计技术就应运而生。
本文通过介绍Web前端响应式设计技术的特点以及应用范围，分析其在现代网页开发中的重要性。
同时，对于响应式设计的实现方式也作出了详细的解释与举例。
最后，文章探究了响应式设计在提升用户体验、提高网站访问量、以及在SEO优化等方面的作用。
关键词：Web前端、响应式设计、现代网页开发、用户体验、SEO优化Ⅰ、引言Web前端技术的发展，让网页开发逐渐变得更加多样化、复杂化。
同时，随着移动互联网的兴起，手机、平板等设备已经成为绝大多数用户上网的主要终端。
然而，各种设备的屏幕大小和分辨率的不同，给网页开发工作带来了很大的挑战。
为了适应多屏幕、多设备的需求，Web前端响应式设计技术应运而生。
本文将介绍响应式设计技术的原理以及在现代网页开发中的重要性。
Ⅱ、Web前端响应式设计技术的特点响应式设计通过CSS的媒体查询（media query）适配不同的设备与屏幕大小，使网页能够自动适应各种不同的设备，呈现出最佳的阅读效果和用户体验。
响应式设计技术最重要的特点就是可以让设计师、开发者在不同尺寸的设备上呈现相同的页面内容和信息。
在响应式设计中，使用流动的网格布局和弹性的图片和媒体元素，帮助网页的内容与布局能够随屏幕大小或设备类型的变化而做出相应的调整。
Ⅲ、响应式设计技术在现代网页开发中的应用范围(一) 提高用户体验在移动设备时代，用户对于网页的访问已经超过了传统台式机计算机，同时用户也希望能够在不同的设备上享受相似的阅读和浏览体验。
而响应式设计将有助于网页设计师将页面元素以适当的方式进行排列和呈现。
无论在屏幕较大的台式设备上还是在移动设备上，用户都可以方便地找到他们需要的内容。
(二) 提高网站访问量随着访问设备的多样化，越来越多的用户正在使用手机、平板等移动设备上进行在线浏览。
响应式网站设计稿范例
响应式网站设计稿范例在当今高度数字化的世界中，网站已成为个人和企业展示及推广自己的重要方式。
而响应式网站设计作为一种新兴的趋势，已经成为设计师们追求的目标。
本文将为大家介绍一个响应式网站设计的范例，以帮助读者更好地理解这一概念以及如何实现。
【正文部分】我们选取的设计范例是一个在线购物网站。
该网站的目标受众是年轻消费者群体，因此设计以时尚、清新和易于导航为重点。
秉承响应式网站设计的原则，该网站的布局会在不同设备上自动适应，为用户提供一致且优质的浏览体验。
在手机端，该网站的布局简洁而直观。
顶部的导航菜单以一个可折叠的按钮形式展示，以充分利用有限的屏幕空间。
主页的焦点内容是一个轮播图，以滑动的方式展示不同的产品推荐。
下方则是一系列分类标签，用户可点击以浏览不同的商品类别。
整体布局简洁明了，用户可以通过滑动手势轻松浏览页面内容。
而在平板和台式机设备上，该网站的布局则更加丰富和复杂。
导航菜单展示为一行水平导航条，产品推荐区域以网格状展示，带有图片和文字描述。
随着鼠标滚动，用户可以看到更多的商品分类和详细信息。
此外，网站还提供产品搜索栏和购物车图标，以便用户快速找到自己想购买的商品，并将其加入购物车。
无论在哪种设备上浏览，该网站都保持了一致的设计风格和用户体验。
通过采用响应式设计，用户可以以各种设备浏览网站，而不必为适应不同的屏幕尺寸而感到困惑或不便。
这种设计方式充分考虑了用户的需求，提供了流畅、直观和一致的体验。
此外，在网站的底部还提供了其他重要的信息和功能，比如联系方式、帮助中心链接以及社交媒体图标等。
这些信息和功能的设置能够使用户更好地了解产品和公司，并提供更多的互动渠道。
在设计这个响应式网站时，我们还特别注意了网站的加载速度和性能。
大量使用了压缩和优化图片，以减少页面加载时间。
同时，也采用了分段加载和延迟加载的技术，以保证页面的快速响应和流畅滚动。
总的来说，这个响应式网站设计范例展示了如何通过合理而灵活的布局来适应不同设备的显示，以提供一致的用户体验。
基于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. 色彩和字体设计色彩和字体的选择对网页的整体效果起着重要的影响。
在设计过程中，应该选择适合不同屏幕尺寸的主题色彩和字体，并遵循用户友好的原则。
三、网页开发1. HTML 结构开发根据设计稿，使用 HTML 语言创建网页的结构。
在这个过程中，应该合理使用标签和元素，保持文档结构的清晰和语义的准确。
2. CSS 样式添加使用 CSS 样式为网页添加样式和布局。
在这个过程中，可以使用媒体查询，为不同屏幕尺寸设置不同的样式规则，以适应响应式设计的需求。
3. JavaScript 交互开发根据网页的需求和目标，使用 JavaScript 为网页添加交互效果，提高用户的体验。
例如，添加导航菜单的下拉功能、图片轮播等交互效果。
四、测试和优化在开发完成后，需要对网页进行测试和优化。
测试的目的是确保网页在不同设备上的显示效果和性能表现。
根据测试结果，对代码进行优化，修复 bug 和提高网页的加载速度和性能。
网页设计与应用毕业论文
网页设计与应用毕业论文一、综述随着互联网的普及和发展，网页设计已经渗透到我们生活的方方面面。
从社交娱乐到工作学习，从购物消费到信息查询，我们无时无刻不在与网页打交道。
那么什么样的网页能够吸引我们的眼球，让我们愿意停留、探索、互动呢？这就是我们今天要探讨的话题——网页设计与应用。
首先让我们来谈谈网页设计的魅力所在，一个好的网页设计，首先得有个让人眼前一亮的外观。
就像我们逛街时，漂亮的店面总是能吸引我们的注意力。
网页设计也一样，美观大方的页面总能让人心情愉快，愿意进一步了解。
接下来就是用户体验，一个易于使用的网页，能让我们轻松找到想要的信息，完成想要的操作。
就像我们用某个APP，操作流畅功能齐全，我们就会觉得这个APP很好用，愿意长期使用。
1. 论文背景及研究意义当我们打开计算机，随时随地都能接触到各式各样的网页。
网页已经成为现代社会生活中不可或缺的一部分，承载着我们的信息需求、交流情感和日常生活功能。
今天我们所见的网页设计，早已超越了简单的文字与图片展示，它融入了更多的设计理念和技术应用，成为了连接人与数字世界的桥梁。
那么为什么我们需要关注网页设计与应用呢？这就涉及到了我们这篇论文的主题。
回想一下互联网刚刚兴起的时候，那时的网页多是静态的，功能相对单一。
但随着科技的进步，尤其是移动互联网的飞速发展，网页设计和应用也迎来了巨大的变革。
从简单的信息展示到复杂的交互应用，从桌面端浏览到移动设备的便捷访问，网页设计在不断地挑战与创新。
我们每天浏览的新闻网站、社交媒体、购物平台等，背后都有着精良的网页设计和应用技术的支撑。
可以说网页设计已经渗透到我们生活的方方面面。
那么为什么我们要研究网页设计与应用呢？这不仅是因为它关乎我们的日常体验，好的网页设计不仅能提供美观的界面，更能提升用户体验，增强网站的吸引力和黏性。
同时随着网络技术的不断进步，网页应用也在不断地拓展新的领域和新的功能。
比如现在的网页应用已经不仅仅是简单的信息浏览，还涉及到了在线支付、在线教育、在线办公等各个方面。
设计一个响应式网站
设计一个响应式网站在互联网时代，网站成为企业展示形象、进行商业运营的重要手段。
随着移动设备使用人数的不断增长，响应式网站成为了网站设计的一个必要要求。
所谓响应式网站，是指能够根据不同设备的屏幕尺寸，自动适应布局和显示效果，提供更好的用户体验。
设计一个响应式网站需要考虑以下几个方面。
一、设计风格网站的设计风格一定要符合企业的品牌形象和风格，同时要适配不同设备和屏幕尺寸。
一般来说单调、简洁、美观、易用的设计更容易受到用户的青睐。
网站的布局要具有一定的美感，同时保证信息的简洁明了，确保用户在访问时不会感到疲惫或迷惑。
色彩的选择也需要考虑不同屏幕的展现效果和用户目的，比如柔和的色调对手机用户更加友好。
二、技术实现响应式网站设计中最重要的技术便是CSS的媒体查询，这种技术可以根据屏幕尺寸进行样式调整。
开发人员需要根据不同设备屏幕尺寸和分辨率，提取样式规则，并通过媒体查询将这些规则应用到不同设备的CSS文件中。
在实现响应式设计时，还应该考虑到图片和视频的大小、加载速度、支持程度等方面。
在设计图像等媒体时也应该有适配各种设备屏幕的设想，建议使用矢量图形和可缩放的图片以及指定标准大小的视屏。
三、用户体验在设计响应式网站时，必须充分考虑用户的行为和习惯。
例如，网站必须能够在不同屏幕分辨率和大小的设备上正常显示，并且可以根据不同设备进行优化。
在移动端，网站最好采用无需放大软件或单手操作的设计方式，这样用户可以轻松地享受到更好的使用体验。
此外，网站的反应速度也是用户关注的重点。
尽量精简页面插件和JQuery等，也能有助于加速响应速度。
四、界面交互设计响应式网站时，还要考虑到涉及界面交互的部分。
通常情况下，响应式网站需要提供更为简便的国际化功能以提高用户参与度，在全球化的设计考虑下更应该考虑到各种不同国家地区的访问频率和应用场景，并评估应用界面的人性工程学。
同时，政策合规性的检查和功能需要与具体法规趋势和需求进行分析认真量化。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
浅谈响应式网页设计
[摘要]经过十多年的快速发展，中国的互联网如今已经日趋成熟。
随着3G, 4G的发展
和移动通信及WEB2. 0技术的提升以及近年来各种移动智能设备的兴起，移动互联网
也即将会步入高速发展时期，成为一种大势所趋。
这一来就使中国互联网的发展变得
更加丰富、多元化趋势。
越来越多的用户拥有多种移动设备，像智能手机、平板电脑、智能手表等，在现今的大环境下移动设备正在普及并且正在逐渐超过PC设备，面对市场上移动设备的不断增多，同时伴随着各种设备屏幕的分辨率、尺寸和型号的越来越多，如何能够在不同屏幕、不同系统平台等环境下保持网页的一致性，满足用户的一
致体验这将成为了整个网页设计行业的一个新挑战。
据非官方调查，移动设备正在逐渐超过PC设备，如果数据属实那么无可置疑，以后我们的网页设计就应该实现响应式布局。
设想一个在移动终端都不能正常显示的网页能
给公司企业带来的大概也只有负面的影响，所以为了避免这种情况能够使所有利用移
动设备访问网站的用户都能有最优最好的体验，响应式设计绝对是最好的一种选择.
【关键词】:设备响应式设计;Web设计;移动终端;动态网页
一、晌应式网页设计《Responsive Web design)的理念
页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。
具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。
无论用户正在使用笔记本还是ipad，我们的页面都
应该能够自动切换分辨率、图片尺寸及相关脚本功能等.以适应不同设备;换句话说，页面应该有能力去自动响应用户的设备环魂。
响应式网页设计就是一个网站能够兼容多
个终端，而不是为每个终端做一个特定的版本。
这样，我们就可以不必为不断到来的
新设备做专门的版本设计和开发了。
其实这个是一个设计问题，既然是设计的问题，这里就会涉及到很多层面的角色，包括交互设计师，视觉设计师，前端工程师，后台开发工程师。
交互设计师，要满足
各自不同分辨率和设备的页面布局展现方式。
而视觉设计师，则要考虑到页面性能和
移动端带宽问肠，权衡下页面的酷炫效果和视觉色彩的运用。
而前端和后台开发工程师，则要完成满足视觉需求和交互功能.更要考虑到页面加载性能和消耗带宽问题，更重要的是移动端安全性能方面!
二、响应式网页设计要素
Ethan Marcotte曾经在A List Apart发表过一篇文章“Re-sponsive Web Design"，
在第一次正式提出响应式设计概念时就定义了响应式设计的三大要紊:流体栅格、弹性图片、煤体查询。
传统网页是被固定的装在固定尺寸的盒子(栅格)里，无法随着外界环境而改变，而
响应式页面就像一袋水，可以成为不同形状，流体栅格就是按照百分比来设定容器的
宽度，宽度会随着浏览器变化而变化.当然，光容器流体也不行，内容也需成比例变化.所以页面上的内容:文字，图片等都可以设为弹性的。
“流体栅格+弹性内容”让网页
具备了响应能力，媒介查询起的作用是定义响应规则。
就像使用不同的容器来装水，
呈现的形状也将不同。
媒介查询探侧浏览器宽度，并在指定宽度范围内加载不同的样式。
网页显示状态如图2-1所示：
三、晌应式网页设计基本技术
响应式网页设计模式基于“移动第一’的原则而提出。
主要使用如下基本
技:viewport meta”标签，可以在浏览器中禁止zoom;排版，根据设备大小自动剪裁，包括字体大小和垂直空间布局;大屏幕设备采用grid布局，小屏幕设备缺省使用单列;
针对特定代理做一定的设计折中。
通过使用这样的技术策略，可以达到良好的网页屏
幕自适应效果，尽可能消除不同屏幕尺寸上用户体验的落差。
如果符合上面的设计，header看起来会是这样:
<!DOCTYPE html>
<html dir=”Itr" lang="en一US">
< head>
< meta charset=”UTF-8"/>
< title></title>
< meta name=“viewport" content=”width=device-width"/>
<link rel=“stylesheet" type=”text/css" media=”screen “ href=”core.css”/> <link tel=“stylesheet" type =”text/ena" meaia=”screen and(min-
width:640px)” href=”grid.css”/>
<!--[if lte IE 8]>
<link rel=”stylesheet" type=”text/css" media=”screen" href=”ie/ core. css"/>
<link rel=”stylesheet" type=" text/css" media = "screen" href=”grid. css"/> <![ endif]-->
<link rel=" stylesheet" type=“text/ces" media=“screen" href = "style. css”/> </head>
上面所列的代码，还是一个在不断试脸和发展中的响应式设计，随着时间的推移,以及设备的发展，这里表述的设计本身也将得到发展。
四、响应式网页设计的优势
开发、维护、运营成本优势:
页面只有一个.只是针对不同的分辨率、不同的设备环境进行了一些不同的设计.所
以在开发、维护和运营上.相对多个版本，能节约成本。
兼容性优势:
移动设备新的尺寸层出不穷.定制的版本通常只适用千某些规格的设备.如果新的设
备分辨率变化较大.则往往不能兼容.而开发新的版本需要时间，这段时间内的访问就是个问题，但是响应式Web设计可以提前顶防这个问题。
操作灵活:
响应式设计是针对页面的，可以只对必要的页面进行改动.其他页面不受影响。
五、响应式Web设计的劣势
兼容各种设备工作量大，效率低下代码累赘，会出现隐藏无用的元素，加载时间加
长其实这是一种折衷性质的设计解决方案，多方面因素影响而达不到最佳效果一定程度
上改变了网站原有的布局结构，会出现用户混淆的情况。
但，响应式网页设计最近几年被提的比较多.但是响应式设计仍然在不断变化.不断创新。
比如，新的设备不断出来，这让以前的设计想法土崩瓦解。
而各种网页的晌应式设计也获得了越来越多的注意.“让人们忘记设备尺寸”的理念将更快地驱动响应式设计，所以网页设计也将迎来更多的响应式设计元素。
Web响应式设计原则
美国交互媒休设计大师Rob Flaherty在他(ttj Designing The Well-Tempered Web
文章中就响应式Web设计的一系列问题给出了一些建议，根据Rob Flaherty的建议及
结合作者对Web响应式设计概念的理解与开发经验，提出了如下针对响应式设计需求
不可或缺的四个设计原则。
移动优先原则
随着移动互联网的大举发展，移动设备的不断增加，移动终端的持有人数己经逐渐在赶超PC机，考虑到当前的发展形势，优先考虑移动设计无可厚非。
有限所谓移动优先原则是指，整个页面设计的流程优先考虑到移动设备的兼容显示，再次前提下在考虑PC 机的兼容显示。
触控优先原则
对触控优先原则的考虑也是华于移动互联网的发展迅速的前提下提出的。
在移动设备终端上LI前触控是我们主要的一种人机交互方式。
笨于这点在设计页面上就应该优先考虑设计出易于手指触摸的按钮等交互元素其次才是考虑同样易于鼠标点击的按钮等其他元素。
所以为了能够使设计出的界面能够兼容史多的平台系统、设备环境等
条件，网页设计师应该先从触控优先原则入手设计页面，之后在此丛础上对页面进行适当的调整以在不影响移动设备正常显示下.达到对PC端的兼容显示。
即使网页上的相关交互元素既适合手指触摸又适合鼠标点击。
弹性化原则
在弹性化布局的琴础上引入Css媒介查询的功能使得web响应式的设计和开发思
路让页面真正的富有弹性。
页面布局再不会被破坏，图片的尺寸可以被自动调整，虽然这并不是最完美的解决方案，但它给了我们一种新的选择。
这样无论用户切换设备的屏幕定向方式，还是从PC机屏幕转到iPad或者手机上浏览，页面都能够作者响应与调整。
宏观性原则
在响应式Web开发过程中，设计人员在项目的每一个阶段都要在多种浏览器和不
同尺寸屏幕中进行测试，以尽一早发现问题。