响应式web,这玩意有谁开发过实战项目吗？

试试语音读文章

热门回答：

响应WEB概念在移动互联网兴起的初期。的确很火。它主要解决原PC网站样式向移动端过渡的问题。以一套前端代码适配PC、手机和其他显示设备。以较小的代价实现网站产品的多维呈现。

我个人作为勉强的全栈。曾经选用过最热的Bootstrap前端框架。开发过一些web应用。虽然后来。随着移动端越来越成为重点实现方向。感到响应式网站设计。并不能为移动网站带来优良的体验和高开发效率。至少在我近几年的项目中。面向移动端。已经完全放弃了响应式开发方法。采用了更纯粹的移动前端框架。以适应不仅是web。还有APP、小程序的前端需求。

但是。并不能说响应式web设计落伍了。没用了。根据项目特点。人员技术力量。选用最适合的方法。做最优秀的实现。是开发的实践准则。

下面。围绕实战开发响应web的大致方法、流行的框架工具介绍、响应式的优缺点总结。展开一些叙述和讨论。

什么是响应式网站设计？

响应式网页设计 Responsive Web Design。从开发角度上讲。就是使网页能通过识别屏幕宽度、做出相应调整的网页设计。它面向的设备是超宽屏幕、pc显示器、平板电脑、手机。这里面大家很容易忽视超宽屏幕的设计。因为很多开发者为了简化设计。往往在针对超宽屏幕只做居中处理。

实现原理

通过css样式语言。有时候也会结合一些javascript。考量屏幕宽度。自动调整网页显示和布局。以适应不同尺寸屏幕的浏览优化体验。

实现目标

最好的响应式设计。就是设计者开发出一套全端网页。为电脑、手机、平板等不同终端的用户提供更加舒适的界面和更好的交互体验。比如手机端的触摸和PC端鼠标操作效果。而且随着目前大屏幕移动设备的普及。响应式开发方法还是有自己独特的优势。

响应式网站开发方法

布局

在构建响应式网站或改造旧网站成为响应式结构时。首先要考虑的就是布局。

主要是两部分页面元素：

延展全屏宽的元素。比如我们在PC贯穿全屏宽的元素。css: width:100%；

主内容块的最大宽度定义。以下定义了4种常见分辨率的容器最大宽度；

@media (min-width: 576px) {

.container { max-width: 540px; }

}

@media (min-width: 768px) {

.container { max-width: 720px; }

}

@media (min-width: 992px) {

.container { max-width: 960px; }

}

@media (min-width: 1200px) {

.container { max-width: 1140px; }

}

媒体元素宽度定义

下面的CSS代码将确保图片永远不会比其父容器大：

img { max-width: 100%; height: auto; }

或者根据设备的分辨率不同。需要显示不同size的图片:

<img src=\" image.jpg\" alt=\"\" data-src-600px=\" image-600px.jpg\" data-src-800px =\" image-800px.jpg\" />

这种弹性显示媒体的方式。需要借助CSS或JS的方式实现。

版式（Typography）定义

这是响应式设计中最重要的部分。有很多响应式设计的排版方式需要注意。比如：

CSS3规范中包含了一个定义尺寸的元素rem。它的工作原理与em几乎相同。但是rem的大小相对于html元素而言。这使得rem比em更容易使用。

html { font-size:100%; }

通过以下CSS代码可以定义不同分辨率下的相对字体大小。

@media (min-width: 640px) { body {font-size:1rem;} }

@media (min-width:960px) { body {font-size:1.2rem;} }

@media (min-width:1100px) { body {font-size:1.5rem;} }

最流行的响应式框架

使用前端框架可以提高前端开发的效率。通常框架已经为开发者搭好了脚手架。只需要在上面累加我们的特殊需求就可以了。这帮助码农减少编码工作量。并节省了宝贵的时间。

当前有各种各样的响应框架可用。并且新仍在不停的进化更新。在众多选择中。选择适合的框架是很困难的。下面列举了几个最流行的响应框架。

Bootstrap

Bootstrap是国内最流行、最快速、最友好的框架。这个框架是2011年由Twitter的开发者创建的。目前。整个网络上有数百万的网站都在运行这个神奇的框架。在GitHub他的追捧数量已经超过了100多K。

Bootstrap包括了HTML、CSS和JavaScript。你可以轻松地开发各种规模和复杂度的响应式网站。

Foundation

它相当复杂。不适合新手使用。Foundation具有可读性、灵活性、语义性和完全可定制性。Foundation自带GPU加速功能。可实现闪电般的快速和流畅的动画效果。它提供了Fastclick.js。可在移动设备上快速渲染。

Pure

非常轻的一个框架。该框架包含响应式CSS模块。是为迎合移动市场而开发的。开发人员可以使用各种样式、CSS模块以及组件和可定制的工具来开发网站。

Semantic UI

SemanticUI是相对较新的框架。但它在很多方面都很突出。它已经成为非常流行的前端框架之一。它使用的是自然语言。

Semantic的性能记录功能让你可以追踪到代码的瓶颈。而无需深挖堆栈痕迹。使用Semantic。直观的底层之上可以配备一个高级主题变量。让您有充分的设计自由度。

Semantic UI集成了大量的第三方库。因此整个开发过程会更容易一些。

响应设计的优点

响应式方式可以在台式机。平板电脑或智能手机上构建流畅运行的web样式设计 。它的实质是一种适配性的编码设计。它具备很多优点：

开发维护一套前端响应式代码。可以适配多种显示设备。

只需要拥有一个入口网址。无须通过脚本。判断浏览设备而重定向访问。更不需要配置二级域名。

简化SEO（搜索引擎优化）。响应式设计。无需为移动版本创建特定的内容。这对SEO友好的。搜索引擎收录的只是内容。而对网页语言代码毫无兴趣。因此。谷歌百度在一段时期还建议优先考虑响应式设计。

有可能会节约开发成本？这一点我自己也很有疑惑。我个人认为如果是仅仅适配显示的话。响应式设计的确可以节约成本。但精致的移动端交互设计。还是纯移动框架最受用。

简化网站推广数据分析。无论来自什么入口。都一网打尽所有访问数据。

响应设计的缺点

尽管响应式设计有很多优点。那么缺点应该被忽略吗？事实并非如此。响应式网页设计有一些需要注意的缺点。为了在一套体系框架下。去做各分辨率下的大小显示适配、内容取舍。那种煎熬你体验过吗？

某些响应式网站的加载时间会更长。因为将加载一些不必要的HTML / CSS。例如。很多响应站点上的图像只是在视觉上按比例缩小。而没有采用媒体内容的弹性加载策略。

耗时的开发。对于响应式网站而言。这是一项耗时的任务。如果您打算将现有网站转换为响应式网站。则可能需要更多时间。

响应式Web设计的流体布局。使设计人员难以很好地控制设计风格。设计人员正在尝试分别针对移动和桌面布局显示线框和设计原型。只有改进了这两种布局。才能真正实现响应式Web设计策略。

UX（用户体验）不佳。通过响应设计。您想要同时满足台式机和移动用户的需求。但是。移动设备和台式机毕竟是完全不同的用户体验。因此。有很大风险可能同时失去两类用户。

需要承受内容的取舍。排版的需要、推广策略的不同、体验的差异。造成移动版本的内容很可能与桌面版本的内容不一致。因此。采用响应式设计不可能使您的内容适应这些设备中的每一个。那么在一个页面里用技术实现这种取舍。是很痛苦的。

写在最后

选择了开发。终会有学不动的那天。对于前端、后端、运维、全栈。都是一样。某项技术熟练了。我们总希望它的生命周期长一点。如果有一天。对新技术的那种兴奋感不再有的时候。做一个方向的了解者规划者也是不错的。

希望所有Coder身体健康。永远快乐。

其他观点：

一个非常好的问题。响应式Web设计是一种页面设计布局。理念是“让人们忘记设备尺寸”。可以智能地根据用户行为以及使用的设备环境进行相对应的布局调整。

一。特点

1。能够以可变尺寸显示网页

2。动态适应平板和移动设备

二。常用框架

1。Bootstrap

Bootstrap是流行的开发响应式 web 的 HTML, CSS, 和 JS 框架,由两个Twitter员工开发并开源。在Github上非常火爆。在国内也有很多粉丝。

2。UIKit

UIkit 是一个轻量级、模块化的前端框架。可快速构建强大的web前端界面。根据不同的屏幕分辨率与上网设备。会自动做出响应。提供一致的体验。

3。Ivory

Ivory是一款强大、灵活、易用的响应式框架。Ivory基于12列的响应式网格布局。包含表格。按钮。表格。分页。拨动开关。工具提示。手风琴。选项卡等网站中常用的组件和样式。

三。Ant Design实例

在开发Web服务脚手架时。后台管理系统基于Ant Design Pro开发。

其他观点：

我前端做了有十多年了。响应式技术大概2010年出现的。我在这方面案例我经手大概有1000多个。

也正是基于这么多项目。我一直想整理一套快速前端开发框架。我也开发过不少响应式框架。不过近期的这个是我个人最满意的。它是kuapingUI跨屏ui框架

http://ui.kuaping.com

简单介绍一下

它不是一个再造的css框架。几乎没有学习成本。它是基于bootstrap的基础之上开发的大组件框架。比如新闻列表来说。就提供了十几种风格供你选择。非常的方便。

• 准备与好友合伙做生意,开什么店合适？
• 想开个店,开什么好呢？资金不多,刚刚创业。谢谢？
• 有什么行业适用于初创业？
• 刚入社会的人想开店,最好开一家什么店？
• 什么类型的项目适合刚创业的人群呢？

以上就是由互联网推广工程师 网创网 整理编辑的，如果觉得有帮助欢迎收藏转发~