pc项目适配方案
常见的适配方案:
- 流式布局: 百分比布局, 宽度使用百分比, 字体还是使用px
- rem布局: 所有的单位使用rem, 在不同的屏幕下, 通过设置html的字体大小来实现自适应
- 通过给出一个安全版心, 内容只占中间的1200px, 左右留白, 使之在低分屏下面也能够完整展示
常见技巧
- fex布局
- vw/vh适配
- calc
- 媒体查询
- 栅格系统
流式布局
宽度使用百分比, 高度不容易控制, 因为宽度变小了, 里面的字体就会换行, 高度从而变高, 如果控制了高度, 将会出现滚动条
- 优点: 比较简单, 可以满足一般适配
- 缺点: 不能一屏展示, 高度无法控制
rem布局
所有单位通过rem进行设置, 这样可以满足在所有高度和宽度比一样的情况下显示效果一致
- 优点: 可以实现高度宽度自适应, 整屏展示, 对于高分屏能够展示和设计稿基本一致
- 缺点:
- 设置时需要每个计算对应的rem
- 另外对于具有echarts的地方, 需要单独去算字体的大小
- 对于低分屏, 字体相对变小, 从而导致字体发虚,或者达到12px以下, 谷歌浏览器将不会缩小字体, 从而导致样式混乱
安全版心
现在设计图都是全屏的, 不用考虑
总结:
- 对于高分屏来说, 必须使用rem来进行适配, 不然在高分屏下面展示时, 字体会变得很小
- 对于1920以及其分辨率下的, 可以使用流式布局结合 vw/vh 以及 calc进行使用
- 对于部分需要特别调整的再使用媒体查询
