大屏适配方案

最新推荐文章于 2024-02-29 14:13:40 发布

神奇大叔

最新推荐文章于 2024-02-29 14:13:40 发布

阅读量253

点赞数

分类专栏：移动端与REM 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_43294560/article/details/131682411

版权

移动端与REM 专栏收录该内容

16 篇文章 2 订阅

订阅专栏

文章介绍了如何利用vw和vh单位进行容器布局，通过设置rem基准值实现像素到rem的转换，以及运用scale进行屏幕适配和防止缩放后的热区偏移。同时提供了一个动态调整缩放比例的示例，确保在不同尺寸屏幕上元素的位置和大小能正确显示。

摘要由CSDN通过智能技术生成

vw、vh

将容器布局通过vw、vh设置

vwDiv = (300px / document.documentElement.clientWidth ) * 100vw

rem

拿 1920 * 1080 的标准屏幕大小为例，将屏幕分为10份，先计算rem 的基准值: 1920 / 10 = 192
把所有元素的长、宽、位置、字体大小等原来的 px 单位全部转换成 rem
网页加载后，动态设置 html 的 font-size 为当前浏览器窗口宽度 / 10

scale

const handleScreenAuto = () => {
     const designDraftWidth = 1920;//设计稿的宽度
     const designDraftHeight = 960;//设计稿的高度
     //根据屏幕的变化适配的比例
     const scale = document.documentElement.clientWidth / document.documentElement.clientHeight < designDraftWidth / designDraftHeight ?
         (document.documentElement.clientWidth / designDraftWidth) :
         (document.documentElement.clientHeight / designDraftHeight);
     //缩放比例
     (document.querySelector('#screen') as any).style.transform = `scale(${scale}) translate(-50%,-50%)`;
 }

解决缩放热区偏移问题

document.addEventListener('click', function (event) {
  // 假设缩放比例
  const scale = 1.5;

  // 获取点击事件的原始坐标
  const originalX = event.clientX;
  const originalY = event.clientY;

  // 计算相对坐标
  const relativeX = originalX / scale;
  const relativeY = originalY / scale;

  // 使用相对坐标进行后续处理
  console.log('相对坐标：', relativeX, relativeY);
});