如何使设计的网站在移动端也能被用户浏览呢？看完这篇文章便知晓

移动互联网时代，如何使我们设计的网站在移动端也能被用户浏览呢？这里给大家介绍响应式设计。

1响应式定义

响应式网页设计（Responsive Web Design简称RWD）这个术语，由伊桑•马科特（Ethan

Marcotte）提出。他在A List Apart 发表了一篇开创性的文章，将三种已有的开发技术（d性网格、d性、媒体查询）整合起来，并命名为响应式网页设计。

响应网站设计应根据用户使用的设备的分辨率大小进行相应的响应与调整，最大限度满足

不同设备用户体验需求。响应式网站设计就是一个网站能够兼容多个终端，不需要为每个终端做一个特定的版本。

简单地理解：一个响应式网站＝phone端网站＋pad端网站＋电脑端网站

2响应式设计中的界面设计

对于界面设计，我们以前针对桌面产品的设计可能就是一个尺寸的，每个模块的位置比较

固定，但是在响应式设计中，这些东西就改变了，设计师会根据产品的需要设计多个版本的设计。

但是有一点我们需要注意的是 DOM 节点的顺序最好保持一致，因为在响应式的页面中，

我们会使用流式布局，在固定版式通过绝对定位或者外边距负值的方式改变DOM 顺序和视觉顺序的技巧，在这里可能并不适用。

3苹果官网

1d性网格可基于屏幕分辨率扩展或拉伸内容。

2d性在小屏幕上可缩小尺寸，并可扩展大最大尺寸以支持大屏幕。

3媒体查询,是放在站点HTML和样式表中的代码段，用来收集设备显示能力的信息以支持

多种形式的界面。

1外部环境

快速增长且日趋加剧的可联网设备的多样化，让现今已不再有标准的屏幕尺寸。

2自身特色 严格定义的响应式一般是指响应式Web设计，而Web凭借其特有的灵活性和可塑性，可以适应各种尺寸和配置的设备，可以无处不在。

3内部需求

响应式设计概念一提出，各大网站及平台都希望能够采用这秉一应万的模式，可以更灵活

地去适配更多设备，尤其是现在移动设备大爆棚的时代。

4 一切d性化

我们通过响应式的设计和开发思路让页面更加"d性"了。的尺寸可以被自动调整，页

面布局再不会被破坏。虽然永远没有最完美的解决方案，但它给了我们更多选择。无论用户切换设备的屏幕定向方式，还是从台式机屏幕转到iPad上浏览，页面都会真正的富有d性。通过液态网格和液态技术，并且在正确的地方使用了正确的HTML标记。

5 响应式

响应式技术思想：不仅要同比的缩放，还要在小设备上降低自身的分辨率。

当这些请求到达服务器端,后台文件会决定这些请求所需要的是原始还是小尺寸的"响应式"，并进行相应的反馈输出。对于小屏幕的移动设备，原始尺寸的大永远不会被用到。

优点

1、支持任何设备和系统

如今是移动互联网时代，人们上网不再是仅限于PC电脑，手机、平板等移动设备的使用

率也越来越高。而响应式网站可支持任何设备访问，而且还可以在浏览器中调整网站的宽度，让网站不出现滚动条，使得用户不管在任何一种显示器上浏览网站，都不会出现布局混乱、显示不全、或者是乱码的问题，从而最大程度的提高用户的网站体验。

2、可降低制作的时间成本和资金成本

按照传统方法制作出的网站比较有局限性，不一定能够在各种设备和浏览器正常访问。有

的企业就需要做一个PC端网站和一个手机网站甚至是做一个APP，这些都需要投入大量的时间和金钱。而建设响应式网站就可以很好解决这个问题，花一份的钱，就能够获得两种网站的体验，最终实现一站多用的效果，从而达到节省网站建设成本。

3、三站合一，维护轻松

电脑、手机、微信三个网站使用的是同一个网址，同一个后台管理，数据同步更新，所有

和内容只需要上传更新一次即可，维护简单轻松，节约大量的时间和金钱。

缺点

1:对IE老版兼容性不友好

对于老版本IE（IE6、IE7、IE8）支持不好，这是一个致命的问题，如果你的网站用户大

多还采用老版本IE的话，建议不做响应式网页设计。

2:灵活性有所欠缺

基于不同终端的设备属性不同，对产品用户体验要求就会截然不同。内容比较多带有功能

性的网站不适合做响应式

3:速度可能会变慢

由于响应式页面是同时下载多套CSS样式代码，可能在手机上就下载PC、Pad的冗余代码，

导致文件变大，影响加载速度。

1同一页面在不同大小和比例上看起来都应该是舒适的

2同一页面在不同分辨率上看起来都应该是合理的

3同一页面在不同 *** 作方式（如鼠标和触屏）下，体验应该是统一的

4同一页面在不同类型的设备（手机、平板、电脑）上，交互方式应该是符合习惯的。

1 iPad设计尺寸

尺寸：1024768px

状态栏：20px

导航栏：44px

标签栏：49px

2 THE OUTENT 电商APP

1字体

2图标

3公共控件

3 iphone设计尺寸

尺寸：7501334px

状态栏：40px

导航栏：88px

标签栏：98px

界面尺寸及栏高度

1文字

在一款APP中字号范围一般在20-36之间（@2x）,当然iOS 11中出现了大标题的设计，

字号还是要根据产品属性酌情设定。另外需要注意的一点是所有的字号设置都必须为偶数，上下级内容字号极差关系为2-4号。

通过本篇文章你可以学到以下几点：

1什么是响应式网站；

2响应式网站的前景；

3响应式网站有哪些优缺点；

4响应式网站设计的四个层次；

5常见的移动端设备的尺寸规范

用两个div，左边div浮动并包含ul层，右边div浮动包含img。至于样式，左右两边的div按照比例设置个百分比宽度，给个媒体查询media当小于一定程度，左右div宽度为100%。ul中的li则设置宽度为50%，img设置100%就行了

手机响应式布局，是获取屏幕尺寸，在某个区间用一种css，另个区间用另一种css。需要用@media写多份css的。无法做到真正的随屏幕变化而变化。而的用法是随着屏幕的大小，自动把页面自适应到屏幕的大小。这个是管用的。em是字体的宽度，也就是一个字体宽12px，那么em=12px；字体为15px，em=15px；一般用来动态控制字体外的区块大小去适应字体，而不是用来设置字体的大小的。例如： 如果没效果，建议你用贴出来，看看你想要的具体效果是什么。

什么是响应式图标设计 响应式设计主要讲的是布局，那么什么是响应式图标响应式图标设计是一种根据屏幕尺寸来改变图标类型、从而达到更好可读性的设计。 图标为什么要响应式 怎样阅读内容时至今日，我们用来阅读内容的平台越来越多。设备、屏幕分辨率、浏览器、平台——我可以拿着5S+Safari+iOS70浏览网页，也可以拿着1020+Chorome+WP8浏览网页。 各种选择，各种搭配实在是太多了，这些都或多或少的影响了内容的可读性。而图标作为一种视觉语言，可读性非常重要。 图标设计，首先要满足易于理解。其次，图标的可读性必须高。在小尺寸的情况下，图标设计为了追求更高的辨识度/可读性，可以选择牺牲一点美感。 那么能不能美感、可读性兼得呢图标设计的艺术便在于二者的平衡，取与舍。怎样设计，让不同尺寸的图标均能展现美感，同时又具备可读性 我认为，需要根据尺寸范围进行图标响应式的优化 这个理念不是新的。对于栅格化图标来说，这种设计方法很常见。 在网页设计中，很多设计师错误的认为，只要简单的缩放图标即可达到完美的可读性。但实际上并非如此。 每款图标需要三种不同的尺寸，通过使用代码，来自动进行可读性优化。 简单的方法和复杂的方法 有两种最基本的优化方式。一种依靠假定，另外一种更精确。一种简单，一种复杂。 简单的方法是使用Media Queries根据屏幕宽度来调整图标，这种方法奏效的原因是因为，内容的大小通常由屏幕的大小决定——也就意味着，桌面版的图标应该比手机版的图标大。(或许是这样吧) 但是这种方法太被动了，不是吗应该化被动为主动，正确的做法是，让图标元素具备响应式功能——图标会依据图标本身的大小来进行选择(3选1)，更具伸缩性，更灵活，适应面也更广。虽然有点复杂。 具体细节 注意： 下面提出的仅仅是概念，这些代码还没有完成，测试版也没有发布。我们正处于研发阶段，我们需要Kickstarter的众筹。 但并不妨碍我为大家上述这种响应式图标设计的思想。 简单的media-queries(图标的外观根据屏幕尺寸来变) 这是最简单的方法。图标设计的核心是SVG，但其实，我们可以把图标设置成一种字体，这样就能起到很好的响应式效果。将图标的大小看成字重。然后作为字体的图标会根据屏幕的大小来改变字重。可以看看下面这个Demo，图标根据屏幕宽度响应式改变。 Web字体和element-query(图标的外观根据图标尺寸来变) 正如前面提到过的那样，根据屏幕大小来改变图标显示种类，这终归不是一个好办法。图标的显示种类还是要根据自身的尺寸来变。下面这个Demo使用了Element Queries以及Web字体，打造了一种图标动态调节的效果。 SVG 断点 SVG断点法，依赖media queries，以及SVG文件，会根据图像尺寸，进行一系列的触发，较上者效果更好，可以看看下面的demo 结论 更灵活、可读性更高的响应式图标设计需要某种方法，我们正在努力的思考图标尺寸、图标外观、屏幕尺寸的关系，争取早日找到一种简单、高效的解决方法。

---