大屏可视化的屏幕适配

如何使用 rem 和 px 函数适配各种屏幕

1. 整体屏幕适配
整体适配

假设我们的设计稿是16:9的比例,大屏是红色的边框,我们想要显示的效果是紫色 部分,上下居中,左右居中,这样是最好的效果。

  • 如果屏幕很宽,那我们就左右居中,两边留白,宽高比大于16/9的情况;
  • 如果屏幕很高,那我们就上下居中,上下留白,宽高比小于等于16/9的情况。
    根据这个规律,我们可以得到一个算法:


    整体屏幕适配算法
  • Wp为页面有效宽度,Hp为页面有效高度。
  • 页面左右居中,上下居中,四周留白即可。
const clientWidth = document.documentElement.clientWidth
const clientHeight = document.documentElement.clientHeight
const pageWidth = clientWidth / clientHeight > 16/9 ? clientHeight * (16 / 9): clientWidth
const pageHeight = pageWidth / (16 / 9)
  • 然后在head里用JS设置 1rem = Wp / 100
const string = `<style>html{
  font-size: ${pageWidth / 100}px
}</style>`
document.write(string)
2. 适配一个div
div适配

假设设计稿中div的宽度是x,大屏中的宽度为y。
那么我们可以得到一个算法:


div适配算法
  • 假设某 div 在设计稿中长 100px(S设),设计稿宽度 1920px(W设),
  • 那么该 div 在页面中长为 100/1920 * 100rem
  • 最后可以写一个 px() 函数来计算 100px 对应的 rem
const px = (n)=>{(n/1920) * pageWidth}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容