响应式页面的多种处理方案

响应式页面是什么

随着浏览器大小变化、设备变化（显示器）、缩放比变化，页面尽可能的进行自动伸缩、平移等变换，保证页面依旧能完整可用，尽可能的让用户少去手动操作页面

UI设计师通常是以固定比例的页面大小进行组件设计和布局的，而实际浏览器的大小受到设备分辨率、缩放比的影响，实际可使用大小可能不等于设计稿比例 ，设计师不可能设计出所有页面大小的设计稿，所以需要开发人员对不同的设备、不同缩放比的页面进行自动适配。

响应式页面有哪些处理方案

1. rem 方案

rem 的主要思路为，监听页面的大小变化，不同页面大小，使用不同大小的根字体大小。

例如：设置根字体大小为 16 px，则1 px = 1/16 rem，页面内的盒子等单位都变为 rem，若页面大小变化，修改根字体大小为12 px ，则原来页面内盒子宽高大小为16 px，现在会自动变为 12 px，若根字体大小为小数，则页面中的大部分样式数值都可能变为小数。

2. vw/vh 方案

vw/vh 方案主要用于移动端，vw 和 vh 都是相对单位，即vw 是相对视口宽度的单位，100 vw = 100%页面宽度， 100 vh = 100%页面高度，页面变化时，盒子大小总是相对页面实时变化的

3. 百分比

相对于父元素的宽/高，使用百分比的单位来定义子元素的宽/高。使用max-width/min-width 控制子元素的最大最小尺寸。使用百分比控制父级与子级的关系，使用 max-width 和 min-width 控制最大/最小范围

4. 媒体查询

基于媒体查询的响应式设计，使得一个网页可以同时适配多种设备和多个屏幕，让网站的布局和功能随用户的使用环境（屏幕大小、输出方式、设备/浏览器）而变化，使其视觉合理，交互方式符合习惯，CSS 3中的 @media，通过给不同分辨率的设备编写不同的样式规则实现响应式布局，使一个网站可以在不同尺寸的屏幕下显示不同的布局效果, 主要用来解决不同设备、不同分辨率之间的兼容问题

优缺点对比

百分比方案

优点：

1. 百分比单位的兼容性良好
2. 百分比单位不会使文字大小随屏幕大小变化而变化（可以解决rem会导致字体大小变化的问题）

缺点：

1. 适配方案不能统一处理，每个页面都需要单独处理
2. 需要注意百分比的参考对象

Rem 方案

优点：

1. 设备变化、缩放比变化，只需要更改一个根字体的大小，页面就可以自动适配

缺点：

1. 页面中的字体大小变的不可控制，甚至有可能小于 12px（最严重的问题，使用该方案无法解决）
2. 页面中的盒子大小、边框大小等变得不可用，甚至有小数存在，CSS 中使用小数值会影响页面的渲染（侵染）
3. 配置 rem 需要使用第三方插件，插件能自动转换scss、css等外联样式文件，并且 内联 CSS 无法通过插件自动转换 px单位 为 rem单位，需要手写转换工具，在每个必要的位置进行调用工具函数转换
4. 某转换 rem 的第三方插件存在 不那么强的强制性，即该插件会转换所有 template 模板语法中的所有内联 CSS以及外联 CSS， 但是它无法转换 JavaScript 中动态生成的 CSS，这种强制性在部分页面布局上会十分笨重，并且读取所有模板进行 px-rem 的转换，是一项不小的消耗

总结

每个适配方案都有其对应的优缺点,可以根据需求使用不同的方案,甚至可以组合各个方案