响应式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=https://www.wangchuang8.com/" 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