大屏适配整理

适配要求: 保证所有屏幕都能够在一屏展示, 并且不应该出现滚动条的不能出现 大屏项目屏幕分辨率适配：1366768 和 19201080 和 2560*1440 和 4096×2160

宽度适配

• 宽度使用百分比来实现, 能用百分比的就用百分比
• 对于大屏, 要适配所有的字体, 宽度可以通过rem来进行适配

:root {
  font-size: calc(100vw / 19.2);
}
/* 里面的元素写成量出来的长度 / 100 rem, 即可, 这样就可以实现宽度适配 */

高度适配

高度适配是比较麻烦的, 要处理好margin和padding导致的问题, 并且还要控制在一屏下展示全, 还不能出现滚动条

• padding-top, margin-top 如果设置为百分比, 都是依照父元素的宽度
• height, 设置百分比, 是根据父元素的height来设置的, 前提要父元素有高度
• top, 根据父元素的height来设置百分比, left 根据父元素的宽度设置的
• line-height 设置百分比, 是根据当前字体大小来设置行高, 200% 和 2 是一样的

适配技巧

• 通过calc(100% - 34px)
• 高度通过百分比适配, 对于大块的布局优先使用vw以及vh来进行定位到指定的位置
• 对于必须写绝对单位的, 剩余的部分必须要使用calc(100% - xpx)来进行适配
• 对于要居中的元素, 使用absolute来进行定位
• 由于行高写百分比和写像素对高度适配都没用, 所以尽量不要使用行高来居中元素
• 最后再对细节使用媒体查询进行修改

字体适配方案

• 字体通过rem来进行适配, 而不是直接写px, 写px的话在低分屏下面字体会变大, 在高分屏下面看着字体偏小
• 通过媒体查询或者上面的calc来给根元素字体进行赋值

echarts适配方案

大屏肯定是少不了echarts, 在echarts未进行适配, 因此只要有文字的地方都要通过一个函数来算出当前分辨率下面的px, 然后再 赋值上去, echarts的字体不能设置为rem

总结:

rem + vw + vh + calc + % + media + position 合理运用这些, 就能实现各种适配