自适应和响应式的区别

说布局前，我们说软件的架构，经常别人问你项目是c/s还是b/s，初始小白听的一脸懵逼，弱弱说到我是通过浏览器来展示的。哦.....

C/S结构，即Client/Server(客户机/服务器)结构，是大家熟知的软件系统体系结构，通过将任务合理分配到Client端和Server端，降低了系统的通讯开销，可以充分利用两端硬件环境的优势。早期的软件系统多以此作为首选设计标准。
B/S即Browser/Server(浏览器/服务器)结构，就是只安装维护一个服务器，而客户端采用浏览器运行软件。

作为web开发的我们，暂且理解c/s就是app访问服务器，b/s就是浏览器帮你访问服务器

通过浏览器访问又有多种，手机、平板、电脑等等可以通过浏览器上网的设备。
那要怎么去适应这么多不同设备的屏幕咧，听到大佬说有独立式的，响应式的，自适应的。搞前端的同学肯定听过很多这样的，但作为小白的我 ···········
https://www.baibo8.com/wangzhan/1388.html
看到这篇文章好像有点理解独独立制作手机网站和独立制作手机网站的区别了。有个大佬说道如果网站内容不是很复杂就可以考自适应，如果复杂就需要做个移动网站(会多管理一个网站)，还要考虑客户访问移动端多还是pc端多。淘宝好像是全弄了！
对于我还是来点简单的，继续百度响应式和自适应的区别。

响应式布局(Responsive design)就是实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。换句话说就是一个网站能够兼容多个终端，只需要开发一套界面就可以了。
自适应布局(Adaptive Design)通过检测视口分辨率，来判断当前访问的设备是：pc端、平板、手机，从而请求服务层，返回不同的页面，需要开发多套界面。自适应对页面做的屏幕适配是在一定范围：比如pc端一般要大于1024像素，手机端要小于768像素。
https://www.jianshu.com/p/4c15f84e8be3
又懂了。。。
响应式布局：多套CSS
不管使用什么设备都是在服务器把数据推送到浏览器后，脚本或CSS自行检测设备屏幕大小后执行对应的样式表内容，并且一直通过本地脚本在监听屏幕大小的变化，随时做出样式响应的变化，这是主动的。
自适应:一套CSS
是用户请求访问时会夹带设备信息，服务器据此做出判断并调适应对应设备样式文件+HTML内容+JS，返回给浏览器以这种方式适配不同设备。

感觉响应式比较牛逼，开工....

如何使用响应式，介绍一个组件bootstrap可以参考一下，里面有丰富的标签都是响应式的。如过里面没有你适合的标签需要你自定义的时候，你只能自己使用响应式了。

这里先说需要用到几个东西 em、 rem、媒体查询、less。我只简单的说下，详情还请百度。

em 是参考的父级的字体大小
rem 是参考的html根级元素的大小
媒体查询在不同的宽度下可以展现不同的效果。媒体查询用法总结https://www.cnblogs.com/fozero/p/6096266.html
less 是css的扩展，在css的基础上增加了计算属性。css3出了一些新特新和less有点冲突，calc冲突问题参考https://segmentfault.com/a/1190000004580218vue-cli构建项目中使用Less：https://www.jianshu.com/p/e5967c836cfc

遇到一个坑，在样式中设置了scoped媒体查询不生效，去掉生效。只是正对修改html默认字体。

<style scoped lang="less">
@media screen and (max-width: 960px) {
  html {
    font-size: 100px;
  }
}
@media screen and (max-width: 640px) {
  html {
    font-size: 50px;
  }
}
@media screen and (max-width: 320px) {
  html {
    font-size: 10px;
  }
}
</style>

最后编辑于：2019.11.14 20:26:08