请简述实现响应式设计包括哪些技术点，响应式设计的原则

　　只为电脑设计网站的日子已经一去不复返了。技术的发展和移动网站的普及促使网站设计师重新思考他们的工作成果如何在不同的设备上呈现。想想看，你每天在手机或电脑上浏览网页的时间哪个更长？

　　什么是响应式设计？

　　简单来说，响应式网站设计是一种允许设计和代码响应设备屏幕大小的方法。这意味着无论你使用4英寸的Android手机、iPad mini，还是40英寸的影院级显示器，你都将获得最佳的浏览体验。

　　比较静态页面和响应网站在不同设备上的显示效果：

　　响应式最好的网站，基本都是使用流体网格、自适应图像和CSS来改变网站的设计，并根据浏览器的宽度进行渲染。对于设计师来说，最终目标是在不同的设备和平台上无缝定制网站设计的UI和UX。

　　响应式设计的重要性

　　如果我们为一个网站设计开发无数个版本来适应每一种设备，这个过程不仅耗时耗力，而且会使网站无法使用未来先进的技术变革，几乎无法维护。响应式设计是面向未来的网站设计的有效解决方案。

　　响应式网站设计的关键是了解你的受众以及他们浏览网站所使用的设备。现在网站流量有多少来自PC、平板和手机？美国约56%的网站流量来自移动设备。现在全球约有26亿智能手机用户，到2020年，这一数字有望达到60亿。移动设计将变得越来越重要。

　　为不同的设备设计网站是至关重要的，但当涉及到不同的网络浏览器时，这变得更加复杂。每个大型网络浏览器都有自己的移动版本，以不同的方式呈现网站。此外，每个浏览器都有不同的版本——毕竟，你不能指望每个人都使用最新版本。因此，设计适合不同版本的浏览器非常重要。

　　害怕吗？不用担心，对于业内人士来说，调整设计以适应不同版本的浏览器和不同的硬件设备是一场不断的战争。最好的答案是在尽可能多的设备上测试(并雇佣优秀的开发人员)。

　　我应该根据什么尺寸来设计网站？

　　没有所谓的“标准网站大小”。设备种类繁多，型号版本和屏幕分辨率都在不断变化。每个网站吸引的用户使用的设备都不一样。例如，您可以选择在移动设备上查看食谱(在厨房做饭时)，在PC上搜索PS教程(当您想用Photoshop做些事情时)。

　　你使用谷歌分析来了解哪些浏览器和网页尺寸最适合你的网站。面对浏览器大小和设备的无限组合，你应该如何进行响应式设计？

　　尝试设计至少3种布局

　　响应式网站设计应该为不同的浏览器宽度设计至少三种布局。以下数字仅为示例，并非固定标准。

　　小：600px以下。大部分手机都适合。

　　中等：600像素900像素。大部分平板设备，一些大屏手机，一些小上网本都适合。

　　大：大于900像素。大部分PC都适合。

　　每个布局都应该包含相同的文本和图形元素，但是每个布局都应该根据用户的设备以最佳方式显示内容。缩小页面以适应小屏幕会降低内容的可读性，但如果你能相应地减少内容，并将其变成一个列，内容会更容易阅读。

　　需要考虑的问题：

　　用户体验是关键：响应式设计需要的不仅仅是把PC网站变成移动网站。我们需要考虑用户体验、他们的交互以及他们在使用移动设备时真正想要寻找的东西。

　　不要为最新的移动设备设计特定的屏幕尺寸。正确的做法是围绕内容来做。PC上的网站布局和各种元素怎么样，在移动设备上同样的元素应该如何互相适应？这才是你应该关心的。

　　由凯罗尔奥泰尔设计

　　参与：布局的层次结构非常重要，尤其是在移动设备上。通常，我们都持有“少即是多”的观点。与桌面PC相比，移动体验集中在有限的空间内，所以用户在网站上的阅读和移动方式需要非常清晰，才能知道你的主要信息，知道网站的内容。还要考虑页面的主要动作。如果主要目标是让用户点击“联系我们”按钮，那么不要把它隐藏在页面的大量文本下。一定要围绕这些体验来定制你的内容和设计。

　　自适应图像对于响应式网站设计非常重要。你需要考虑图像的缩放比例。它在电脑宽屏、平板电脑或小型移动设备屏幕上看起来如何？从开发的角度来看，代码将允许图像按百分比值缩放到浏览器窗口的宽度。

　　手机网站导航很重要。有几种常见的方法来组织大菜单和内容。它可以是一个普通的汉堡菜单，一个简单的下拉列表选择，一个扩展/折叠字段，或者像Youtube一样的水平滚动标签。

　　 UI车库设计

　　手势为设计开辟了新的可能性。人们喜欢阅读书籍，并用手与内容进行交互——这给用户带来了更多的便利。在手机和平板电脑上，用户可以通过手指运动放大或滑动屏幕上的图像。对交互设计影响很大。例如，如果你有一个图片库，请避免使用标准的转盘(圆点)让人们循环浏览每张图片。想想一个人手指的大小，如何把它变成一个有用的UI解决方案。根据苹果公司的说法，可触摸UI元素的最小舒适尺寸是44 x 44px。这个极限经常被打破，真正的最小尺寸其实在25px左右。复合桌面设计需要一个简单直观的UI，能够适应小的移动屏幕。针对不同设备进行设计时，请始终牢记这一点。设计必须灵活，以便为用户创建所有设备的良好体验。与开发人员密切合作，了解小屏幕上可能出现的会影响设计过程的内容。

　　>·为不同的浏览器宽度设计至少三个版本。比如尺寸分别为600px、600-900px以及900px+。在这些宽度之间，你的内容可以自由缩放，或者可以保留3个固定的布局。有3个（或更多）固定布局并在必要时添加边距通常比流体缩放在设计和实现上更容易。然而，流体缩放可以在更多的设备上提供更好的体验。

　　工具与资源

　　·网络浏览器当然是很好的工具，也是预览设计的最有效资源。你应该安装几个不同的浏览器来获得反馈。然后调整浏览器窗口的大小。

　　·你的移动设备当然也是可用工具，在预览设计效果时非常有用，能让你了解网站在特定条件下的状况。

　　·流体网格是基于百分比值而不是设置像素来设计网站布局。如，PC端网站内容的宽度是930px，但你希望在移动端的宽度能够降到320px。这个缩小比例大约是34.4%。把这个应用到移动端，设计布局中的元素将相应地调整大小。

　　·Google的响应式网站测试工具Resizer是在不同设备预览网站的非常好用的工具。

　　·媒体查询是一种能够能在网站建设时就实施的代码。媒体查询可以让网站根据设备显示器的特性为其设定CSS样式。比如，“当屏幕尺寸为480px或以下，变为平板设计布局。”试一下，在电脑上把浏览器窗口缩小，你会发现内容也随之重新自动调整以适应窗口的大小。

Tags： 网络趣事  

转载：感谢您对队长网红网网站平台的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人站长或者朋友圈，但转载请说明文章出处“来源演示站”。/qzgl/24122.html

很赞哦！ ()