【笔记】前端开发，响应式与自适应布局总结

2、不同系统
不同系统下，比如ios和安卓下会有一些不兼容的情况，这个一般不涉及到针对不同系统的布局，但可能存在需要手写默认组件，来做到样式统一的效果，比如默认的video组件，ios下和安卓下效果和样式都是有点区别的，如果需要样式统一，可能需要手写这个组件。

3、不同设备
一般uniapp的条件编译+js判断设备类型就足够满足自适应需求了，目前还没有遇到需要区分不同品牌手机的情况。

4、不同尺寸
不同尺寸一般是响应式的需求，但是，一般来说用uniapp的条件编译语句+window.navigator对象里的设备信息，来对移动端和pc端写自适应就可以了，并且，手机端是不太会调整浏览器尺寸的，因此不需要做响应式，而pc端通常用flex写布局的话就自带响应式了，这里问题比较大的就是字体，因为即使通过百分比，vw，vh之类的给标签写了响应式，字体大小用rpx（移动端一般都是rpx嘛）的话也是不会随着浏览器尺寸来变化。

因此，如果需求一套代码兼容以上4条自适应+响应式，最好字体用rem，而不是移动端常写的rpx，然后用js来控制html的font-size，并且移动端也是可以用rem来做自适应的，没必要非得rpx（针对字体）

另一种方法做响应式是利用zoom将页面整体缩放，由于zoom缩放是不影响百分比的，因此那些宽度为百分比的元素还可以正常布局，而其他固定单位（包括vw，vh，rpx，px等）的元素，包括文字大小都会被zoom缩放，这样就可以做到不影响布局，但整体缩放文字，来达到响应式。要注意缩放有两种，zoom和scale，zoom是真实修改了数值的，而scale是没有修改元素大小，只是视觉上以元素中心为基准进行了缩放，强烈建议如果是做自适应布局的话最好用zoom，因为scale会让页面空出一大块（因为实际上并没有修改元素大小只是看起来小了），你需要用margin来调整页面位置，并且scale会使fixed定位失效，如果一个被scale的元素内包含一个fixed元素，那么该元素将不会以浏览器为定位基准，而是以这个被scale的元素为定位基准，但zoom就没有这个问题。