前端scale(缩放)

这篇具有很好参考价值的文章主要介绍了前端scale(缩放)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

很多的大屏适配都是使用的这种方案。
这种方案的原理就是根据宽高比例进行缩放。
1、根据宽度比率进行缩放
(宽度比率=网页当前宽度/设计稿宽度)

<script>
    // 设计稿:1920 * 1080
    // 1.设计稿尺寸
    let targetWidth = 1920;
    // 2.拿到当前设备(浏览器)的宽度
    // document.documentElement  获取html的宽度
    let currentWidth =
      document.documentElement.clientWidth || document.body.clientWidth;
    // 3.计算缩放比率(屏幕过宽,根据高度计算缩放比例)
    let scaleRatio = currentWidth / targetWidth; 
    // 4.开始缩放网页
    document.body.style = `transform: scale(${scaleRatio})`;
  </script>

上面这种根据宽度比例进行缩放的,针对1920 * 1080,3840 * 2160(4k)是没有问题的,但是在超宽屏的情况下还是存在只显示一半的问题。
分析原因:

我们的设计稿:
1920 * 1080 => 要适配 (1920*2=3840, 1080*2=2160, 4k屏) 3840 * 2160
也要适配=> ( 1920*4 = 7680 : 1080 * 2 = 2160) 7680 * 2160 

我们当前是根据宽度比率进行缩放的:

先设配3840 * 2160

scaleRatio = 3840 / 1920  = 2

根据这个缩放比率

我们的设计稿宽高都会被缩放两倍

1920 * 2 = 3840

1080 * 2 = 2160



设配7680 * 2160

scaleRatio = 7680 / 1920  =  4

根据这个宽度比例我们的设置稿宽高都会被缩放4倍

1920 * 4 = 7680

1080 * 4  = 4240 
这个原先的比例是 4 : 2,现在变成了 4 :4 ,这也是为什么我们只看到一半高度的原因。

2、动态计算
动态计算网页宽高比,决定是按照宽度的比例还是高度的比例进行缩放。

<script>
    // 设计稿:1920 * 1080
    // 1.设计稿尺寸
    let targetWidth = 1920;
    let targetHeight = 1080;

    let targetRatio = 16 / 9; // 宽高比率 (宽 / 高)

    // 2.拿到当前设备(浏览器)的宽度和高度
    let currentWidth =
      document.documentElement.clientWidth || document.body.clientWidth;

    let currentHeight =
      document.documentElement.clientHeight || document.body.clientHeight;

    // 3.计算缩放比率(屏幕过宽,根据高度计算缩放比例)
		// 若currentWidth是4k屏宽度 3840 除于 我们设计稿的宽度 1920  3840/1920 = 2
		// 这样页面就行进行2倍缩放
    let scaleRatio = currentWidth / targetWidth; // 参照宽度进行缩放(默认情况下)
		
    // 当前页面宽高比例,当页面越宽currentRatio值就越大
    let currentRatio = currentWidth / currentHeight;
		
		// 判断是根据宽度进行缩放,还是根据高度进行缩放
    if (currentRatio > targetRatio) {
      // 根据高度进行网页的缩放
      scaleRatio = currentHeight / targetHeight; // 参照高度进行缩放(屏幕很宽的情况下)
      document.body.style = `transform: scale(${scaleRatio}) translateX(-50%)`;
    } else {
      // 根据宽度进行网页的缩放
      document.body.style = `transform: scale(${scaleRatio})`;
    }
  </script>

完整demo代码:文章来源地址https://www.toymoban.com/news/detail-841828.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        position: relative;
        width: 1920px;
        height: 1080px;
        border: 3px solid red;
        /* 设置缩放原点 */
        transform-origin: left top;
        box-sizing: border-box;
      }
      ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        height: 100%;
      }

      li {
        width: 33.333%;
        height: 50%;
        font-size: 30px;
        list-style: none;
        border: 3px solid green;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
  </body>
  <script>
    // 设计稿:1920 * 1080
    // 设配目标:1920 * 1080 ( 1 : 1) | 3840* 2160 ( 2 : 2 ) | 7680 * 2160 ( 4 : 2)

    // 1.设计稿尺寸
    let targetWidth = 1920;
    let targetHeight = 1080;

    let targetRatio = 16 / 9; // 宽高比率 (宽 / 高)

    // 2.拿到当前设备(浏览器)的宽度
    let currentWidth =
      document.documentElement.clientWidth || document.body.clientWidth;
    let currentHeight =
      document.documentElement.clientHeight || document.body.clientHeight;
    // 3.计算缩放比率(屏幕过宽,根据高度计算缩放比例)
    let scaleRatio = currentWidth / targetWidth; // 参照宽度进行缩放(默认情况下)

    // 当前宽高比例
    let currentRatio = currentWidth / currentHeight;

    if (currentRatio > targetRatio) {
      scaleRatio = currentHeight / targetHeight; // 参照高度进行缩放(屏幕很宽的情况下)
      document.body.style = `transform: scale(${scaleRatio}) translateX(-50%); left: 50%;`;
    } else {
      // 4.开始缩放网页
      document.body.style = `transform: scale(${scaleRatio})`;
    }
  </script>
</html>

到了这里,关于前端scale(缩放)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • opencv 图像的缩放(放大,缩小),翻转,旋转

    opencv 图像的缩放(放大,缩小),翻转,旋转 opencv 最常用的图像缩放方法是使用 cv2::resize() 函数,它需要指定输出图像的大小,和插值算法; opencv 最常用的图像翻转方法是使用 cv::flip() 函数,它需要指定图像翻转方式; opencv 最常用的图像旋转方法是使用 cv::warpAffine() 函数,

    2024年02月07日
    浏览(59)
  • 【JavaScript】2.4 JavaScript和浏览器

    JavaScript最初是为了在浏览器中使用而创建的,它是Web开发的重要组成部分。在这一章节中,我们将学习如何使用JavaScript与浏览器进行交互。 DOM(Document Object Model)是一个编程接口,它允许JavaScript操作HTML文档的内容和结构。HTML文档被解析成一个DOM树,我们可以通过JavaScrip

    2024年02月04日
    浏览(44)
  • [JavaScript] 第三章 Chrome 浏览器中调试JavaScript

    [JavaScript] 第一章 暂无 [JavaScript] 第一章 暂无 [JavaScript] 第三章 Chrome 浏览器中执行 JavaScript

    2024年02月15日
    浏览(48)
  • [JavaScript] 第三章 Chrome 浏览器中执行 JavaScript

    [JavaScript] 第一章 暂无 [JavaScript] 第一章 暂无 [JavaScript] 第三章 Chrome 浏览器中执行 JavaScript

    2024年02月16日
    浏览(55)
  • JavaScript中的浏览器环境和规格

    🧑‍🎓 个人主页: 《爱蹦跶的大A阿》 🔥 当前正在更新专栏: 《VUE》 、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》 ​  ​         在我们的日常生活中,JavaScript已经成为了一种无处不在的编程语言。它的应用范围从简单的网页动画,到复杂的前端框架,

    2024年01月23日
    浏览(45)
  • JavaScript高级序列(一)–深入浏览器渲染原理

    1.1. 网页被下载的过程 一个网页URL从输入到浏览器中,到显示经历过怎么样的解析过程呢?  网页被下载的过程 整个过程我先做一个简单的概括: 下载 HTML 文件 当用户在浏览器中输入网址时,浏览器会向服务器发送请求,请求下载网站的 HTML 文件。 解析 HTML 文件 下载完成

    2024年04月10日
    浏览(39)
  • 运行 Node.js 与浏览器 JavaScript

    浏览器和 Node.js 都使用 JavaScript 软件语言 - 但字面上的 运行时环境 是不同的。 Node.js(又名服务器端 JavaScript)与客户端 JavaScript 有许多相似之处。它也有很多差异。 尽管两者都使用 JavaScript 作为软件语言,但我们可以重点关注一些关键差异,这些差异使两者之间的软件开发

    2024年02月09日
    浏览(51)
  • 游戏窗口无损缩小/放大工具 Lossless Scaling V2.2.5 官方中文 免安装【1.25M】

    无损缩放可让您使用最先进的空间缩放算法、锐化算法和机器学习将窗口游戏升级到全屏。 海洋空间规划 AMD FidelityFX 超分辨率 (AMD FSR) 英伟达图像缩放 (NIS) 整数缩放 最近的邻居 xBR 动漫4K 夏普双线性 双立方 CAS 如果您无法以本机屏幕分辨率(GPU 限制)运行现代游戏并

    2024年02月05日
    浏览(43)
  • 如何在Web浏览器中运行JavaScript代码

    为大家介绍如何在Web浏览器中运行JavaScript代码。 首先,让我们来了解一下JavaScript是什么。JavaScript是一种编程语言,它广泛用于Web开发中,可以让我们在网页上添加动态效果、交互性和动画等等。如果你想在Web浏览器中运行JavaScript代码,你需要先在浏览器中安装JavaScript引擎

    2024年02月16日
    浏览(39)
  • 前端---需要了解浏览器相关知识--浏览器请求服务器资源---缓存

    掘金1:浏览器缓存 掘金2 :浏览器缓存 跟别人怎么讲,从大的说:缓存的原理是什么? 再说什么是浏览器缓存? 浏览器缓存 请求(静态资源 | 动态资源) 一、缓存是什么? 二、为什么? 浏览器是如何判断是否使用缓存的??第一次请求网页 第二次请求相同网页: 三、怎

    2024年02月12日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包