自适应布局
使用户界面能够根据用户的交互行为和设备特性自动调整其大小和结构，从而提供更加个性化的体验。这种布局方式的核心在于它能够智能地响应用户操作，例如滑动、点击或屏幕尺寸变化等，从而保持界面的一致性和可用性。
响应式布局
一种网页设计技术，旨在使同一页面在不同屏幕尺寸和分辨率的设备上能够自动调整布局，以提供最佳的用户体验。它通过一套代码适配多种终端设备，而不是为每个设备创建特定版本的页面。
自适应布局和响应式布局的主要区别在于实现方式、开发成本、适用范围和页面适配能力。
1）实现方式
响应式布局：
通过CSS3的Media Query技术，根据不同的设备屏幕大小和分辨率展示不同的页面布局。它使用一套界面，通过CSS代码的逻辑判断来适应不同设备的显示需求。
百分比布局（Percentage Layout）：使用百分比作为元素的宽度和高度单位，使得元素能够根据父容器的大小进行比例调整。
rem布局（Root Em Layout）：rem单位是相对于根元素（即html标签）的字体大小来计算的，这使得页面布局能够根据根元素的字体大小进行调整。
vw/vh布局（Viewports Units Layout）：vw和vh单位分别代表视口宽度和高度的一部分，常用于创建比例响应的布局。
弹性布局（Flexbox）：Flexbox是一种强大的CSS布局模块，允许开发者轻松地分配空间和对齐元素，特别适用于创建复杂的响应式布局。
网格布局（Grid Layout）：CSS Grid是一个二维网格系统，允许开发者精确地放置和对齐元素，适合处理复杂的多列和多行布局。
自适应布局：
通过检测视口分辨率来判断当前访问的设备类型（如PC端、平板、手机），并返回相应的页面。这需要开发多套界面来适应不同的终端设备。
JavaScript脚本语言：实现元素位置、大小甚至可见性的动态变化，以响应用户的特定操作。
2）开发成本
响应式布局：由于只需开发一套界面并通过CSS调整，开发成本相对较低。
自适应布局：需要为不同设备开发多套界面，因此开发成本较高。
3）适用范围
响应式布局：适用于多种屏幕分辨率下的显示，但需要在同一个终端上通过浏览器进行开发和测试，适用范围较广。
自适应布局：适用于不同大小的终端设备，但需要在不同终端上分别进行开发和测试，适用范围较窄。
4）页面适配能力
响应式布局：可以自动识别屏幕宽度并做出相应的调整，适配范围广泛。
自适应布局：在一定范围内进行适配，如PC端大于1024像素，手机端小于768像素，适配范围较窄。
5）优缺点
自适应布局
优点：
增加灵活性：设计师可以根据不同场景灵活调整界面元素。
提升用户体验：根据用户的实际需求快速调整界面，提供更加个性化的体验。
提高效率：减少不必要的手动调整步骤，显著提高开发效率。
缺点：
复杂度增加：实现自适应布局需要更多的代码和技术支持，可能增加项目的复杂度。
兼容性挑战：不同的设备和浏览器可能对某些技术的支持程度不同，需要开发者考虑多种情况下的兼容性问题。
性能考量：过多的动态调整可能影响页面加载速度，需要仔细权衡性能与用户体验之间的平衡。
响应式布局在不同浏览器和设备上的兼容性问题
媒体查询失效：一些旧版浏览器可能不支持CSS媒体查询，导致页面无法根据设备屏幕尺寸自动调整布局。解决方法是确保正确使用媒体查询，并为这些不支持的浏览器提供备用样式。
前端常用的技术：
postcss-pxtorem + amfe-flexible (推荐！！！唯一缺点就是PC端和移动端页面保持一致。它不适用于在不同设备终端，同一页面出现了不同版式的需求。)
### amfe-flexible```npm i amfe-flexible --save*** lib-flexible 是淘宝手机前端开发团队开发出来的一个开源插件，会自动在 html 的 head 中添加一个 <meta name='viewport'> 的标签，同时会自动设置 html 的 font-size 为屏幕宽度除以10。 *** amfe-flexible 是 lib-flexible 的升级版本，使用 vw 作为布局单位，从底层根本上解决了不同尺寸屏幕的适配问题，因为每个屏幕的百分比是固定的、可预测、可控制的。```
### postcss-pxtorem```npm install postcss-pxtorem --save*** 在项目配置postcss-pxtorem，可在vue.config.js、.postcssrc.js、postcss.config.js其中之一配置，权重从左到右降低，没有则新建文件，只需要设置其中一个即可。*** postcss-pxtorem 和 postcss-px2rem 插件，用于将 px 单位转化为 rem。可以和 lib-flexible 搭配使用。*** postcss-px-to-viewport 插件用于将 px 单位转化为 vw, vh, vmin, vmax 单位。可以和 amfe-flexible 搭配使用。```
媒体查询 + rem/em (注意区分rem和em的区别，rem只作用于根元素html字体大小， em作用于其父级元素字体大小)。其原理和postcss-pxtorem + amfe-flexible相似，都是动态改变根元素或父元素的字体大小，达到适配不同设备。
使用第三方框架：
Bootstrap Bootstrap 是一个非常流行的前端框架，提供了响应式和自适应的设计。它包含了一系列易于使用的组件，包括按钮、表单、导航、布局等。Bootstrap 还提供了许多自定义的CSS 类和 JavaScript 插件，可以快速构建出美观、响应式的网站。
Semantic UI 提供了一些响应式的布局选项，可以轻松地创建出自适应的网站。
Bulma 免费开源的纯 CSS 前端 UI 框架，专注于构建移动优先的响应式 web 界面。提供了众多预定义好的样式，开发者可以直接调用 class 名来使用，通过规范的组合，来达到快速构建 web 界面。
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
