17 | 不一样的体验：交互设计和页面布局
四火
该思维导图由 AI 生成，仅供参考
你好，我是四火。
前几讲我们一直在 JavaScript 的代码中游走，这一讲我们来换换脑子，聊一聊界面设计，讲一讲交互和布局。这部分对于基于 Web 的全栈工程师来说，不只是技术栈特殊的一部分，还是一个能够给个人发展格局带来更多可能的部分。
1. 单页面应用
SPA，Single-Page Application，即单页应用，是一种互联网应用在用户交互方面的模型。
用户打开一个页面，大部分操作都在单个页面里面完成。和传统的 MPA（Multiple-Page Application）相比，用户体验上，SPA 省去了页面跳转的突兀感受和等待时间，用户体验更加桌面化，操作迅速、切换无缝；软件架构上，SPA 可以更彻底地落实前后端分离，后端彻底变成了一个只暴露 API 的服务，将不同终端的视图层的工作，特别是页面聚合搬到前端来完成（如有遗忘请回看 [第 09 讲]）。
对于许多大型应用，SPA 和 MPA 往往是在一定程度上结合起来使用的，比如新浪微博的网页版，用户可以浏览时间线，并作出一些转发评论、媒体播放等等操作，但是也可以跳到单独的单条微博的页面去。
但 SPA 也有着先天的缺陷。比如说，网页的 SEO（Search Engine Optimization）就是一个例子，单页应用上的操作，引起页面的状态改变，很难被搜索引擎敏锐地捕获到，并使之成为“可搜索到的”，因此 SPA 页面的 SEO 需要做额外的工作，关于这部分我会在第五章中介绍一些相关知识。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
本文介绍了响应式网页设计的概念和实现方法。首先，作者讨论了响应式布局的重要性，强调了在不同设备上展现同一份网页的合适性。接着，通过一个简单的页面布局示例，演示了如何使用HTML和CSS实现响应式布局。作者还介绍了如何通过媒体查询和视口设置来实现在不同屏幕宽度下的布局调整。最后，文章提出了两个问题，引导读者思考在实际工作中如何处理不同设备和浏览器的兼容适配问题，以及对一些HTML标签的语义理解。总的来说，本文通过实例和问题引导，帮助读者了解了响应式网页设计的基本概念和实现方法，为他们在前端设计开发中提供了一些思路和技巧。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《全栈工程师修炼指南》，新⼈⾸单¥59
《全栈工程师修炼指南》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(10)
- 最新
- 精选
咕叽咕叽1，目前参与的前端项目针对的浏览器版本较高，IE9+，遇到兼容性的问题较少。对于兼容性的问题，我主要有如下的做法：首先借助了normalize.css库来做兼容，其次借住一些打包工具，会给css加上前缀，比如-webkit，-moz等来做不同浏览器的处理。最后会借住caniuse网站，查属性兼容浏览器的版本。 2，div，span，b是没有语义的，其他均有语义作者回复: 👍
2019-10-284
零维1. 现在基本上工作做都是后台管理系统，不太需要考虑浏览器的适配，需要适配的地方就简单的使用一下栅格布局组件。除此之外，其实我在工作中，很少用到响应式布局的那种解决方案呢。如果PC 、手机都需要某个网页，就做两套了。 2. 发现除了 div 、 span 都是有语义化的。作者回复: 关于 #2 基本正确，就一个：b（加粗）也是没有语义的
2019-10-251
余生还要走多久老师我想问一下宽度高度适配都很好搞，但是字体怎么保证响应式，比如在1920屏幕和在6992的分辨率怎么调整呢作者回复: 除了布局，样式都是可以做到响应式的，字体也一样。比如说，文中关于640px条件做的不同css配置，对于字体也一样可以用。
2021-04-09
xianhaibootstrap是不是响应式布局的银弹？作者回复: 你觉得呢？:) 基本上用了“银弹”这两个字，一般都是否命题。
2019-10-20
Middleware
这篇收获很大作者回复: 😎
2019-10-19
Franklin.du用过Bootstrap。Bootstrap是响应式布局，使用的时候简单的页面还是很容易实现。稍微复杂的界面，需要兼容手机端的时候就没那么方便。手机端屏幕大小有限，要把重要的内容简洁的显示出来，手机页面布局和传统的网页也不一样，更接近手机app的布局样式。最后为了不让页面代码过于复杂，还是设计了两套页面，分别针对大屏幕和小屏幕。2019-10-232
paperen1. 用的bootstrap库 2. 除了div、span其他都算语义化2020-06-30
丁丁历险记pc 和wap 绝不做兼容，太多不一样的东西了。2019-10-22
靠人品去赢这个适配的问题，我看很多种方案都是先拿到宽度，然后定个数比如是100得到单位长度，然后不管多大分辨率，都可以标准化，老师有没有更好的适配方案，还有现在回头用原生的JS写页面好难受，不知道什么原因赋值不成功，不起作用很难受。2019-10-18
leslie我记得样式和加载不同：有时会听到开发PM抱怨用户用小众型的浏览器，甚至许多都是根本不曾听闻的，导致效果不一致缺东西。 其实这块最大的坑在于有时不知缺啥且做了个性化导致：个性化其实有时导致的兼容性问题。2019-10-18
收起评论
