大屏适配方案汇总

2024-06-20 05:52
文章标签 汇总 方案 适配 大屏

本文主要是介绍大屏适配方案汇总,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1. 适配方案1:rem + font-size

我们都知道,在 css1rem 等于 html 根元素设定的 font-sizepx 值,通过动态的修改html 根元素的 font-size 大小就能动态的改变 rem 的大小,从而实现适配。

原理

  1. 动态设置 HTML 根字体大小
  2. px 转成 rem

实现

  1. 引入 lib-flexible 动态设置 HTML 根字体大小和 body 字体大小。
(function flexible(window, document) {var docEl = document.documentElement;var dpr = window.devicePixelRatio || 1;// 调整 body 字体大小function setBodyFontSize() {if (document.body) {// body 字体大小默认为 16pxdocument.body.style.fontSize = 16 * dpr + "px";} else {document.addEventListener("DOMContentLoaded", setBodyFontSize);}}setBodyFontSize();// 移动端默认平均分成 10 等分(适用移动端)// pc端默认平均分成 24 等分(适用 pc 端)function setRemUnit() {var splitNum = /Mobi|Android|iPhone/i.test(navigator.userAgent) ? 10 : 24;var rem = docEl.clientWidth / splitNum; // 1920 / 24 = 80docEl.style.fontSize = rem + "px"; // 设置 html 字体的大小 80px}setRemUnit();// 页面调整大小时重置 rem 单位window.addEventListener("resize", setRemUnit);window.addEventListener("pageshow", function (e) {if (e.persisted) {setRemUnit();}});// 检测 0.5px 支持if (dpr >= 2) {var fakeBody = document.createElement("body");var testElement = document.createElement("div");testElement.style.border = ".5px solid transparent";fakeBody.appendChild(testElement);docEl.appendChild(fakeBody);if (testElement.offsetHeight === 1) {docEl.classList.add("hairlines");}docEl.removeChild(fakeBody);}
})(window, document);
  1. pxrem

    pxrem 的方式有很多种:手动、less/scss 函数、cssrem 插件、webpack 插件、**Vite 插件。

  • cssrem 插件转换

    vscode root font-size 设置为 80px。这个是 px 单位转 rem 的参考值。

    image.png

    接着就可以按照 1920px * 1080px 的设计稿愉快开发,此时页面已经是响应式,并且宽高比不变

    image.png

  • webpack 插件转换

    安装

    npm i webpack webpack-cli -D
    npm i style-loader css-loader html-webpack-plugin -D
    npm i postcss-pxtorem autoprefixer postcss-loader postcss -D
    
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    const path = require("path");module.exports = {entry: "./src/index.js",mode: "development",output: {filename: "[name].[contenthash].bundle.js",path: path.resolve("./dist"),},module: {rules: [{test: /\.css$/i,use: ["style-loader", "css-loader", "postcss-loader"],},],},plugins: [new HtmlWebpackPlugin({template: "./index.html",}),],
    };

    配置 postcss.config.js 文件,postcss-pxtorem 的配置 可以查询 文档

    module.exports = {plugins: {autoprefixer: {},"postcss-pxtorem": {rootValue: 80, // 根元素的字体大小unitPrecision: 5, // 小数点后精度propList: ["*"], // 可以从px改变为rem的属性exclude: /node_modules/i, // 要忽略并保留为px的文件路径minPixelValue: 0, // 最小的px转化值(小于这个值的不转化)mediaQuery: false, //  允许在媒体查询中转换pxselectorBlackList: [], // 要忽略并保留为px的选择器replace: true, // 直接在css规则上替换值而不是添加备用},},
    };
    

    main.js 中引入lib_flexible.js index.js index.css ,最后重启项目即可。

这里我为了回顾一下 webpack 配置,就从 0 开始配置了。一般通过脚手架创建的项目会有集成webpack以及postcss的,只需要 安装一下 postcss postcss-pxtorem 与配置 postcss.config.js 即可

由于 viewport 单位得到众多浏览器的兼容,lib-flexible 这个过渡方案已经可以放弃使用,不管是现在的版本还是以前的版本,都存有一定的问题。下面就将介绍 viewport 的方案。

2. 适配方案2:vw 单位

直接使用 vw 单位。

屏幕的宽默认为 100vw,那么100vw = 1920px, 1vw = 19.2px 。

实现

pxvw

  • cssrem 插件方式转换

    image.png

    接着就可以按照 1920px * 1080px 的设计稿愉快开发,此时的页面已经是响应式,并宽高比不变

    image.png

  • webpack 插件转换

安装

npm i webpack webpack-cli -D
npm i style-loader css-loader html-webpack-plugin -D
npm i postcss-px-to-viewport autoprefixer postcss-loader postcss -D

webpack.config.js 配置不变

配置 postcss.config.js

module.exports = {plugins: {'@our-patches/postcss-px-to-viewport': {unitToConvert: 'px', // 要转化的单位viewportWidth: 1920, // UI设计稿的宽度unitPrecision: 6, // 转换后的精度,即小数点位数propList: ['*'], // 指定转换的css属性的单位,*代表全部css属性的单位都进行转换viewportUnit: 'vw', // 指定需要转换成的视窗单位,默认vwfontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位,默认vwselectorBlackList: [], // 指定不转换为视窗单位的类名,minPixelValue: 1, // 默认值1,小于或等于1px则不进行转换mediaQuery: true, // 是否在媒体查询的css代码中也进行转换,默认falsereplace: true, // 是否转换后直接更换属性值include: /\/src\/views\/pc\/layoutMapBS\//,exclude: [/node_modules/], // 设置忽略文件,用正则做目录名匹配landscape: false // 是否处理横屏情况}}
}

:::warning{title="注意"} postcss-pxtoviewport 这个插件在文档中有 include 这个选项,但是作者一直没更新代码,导致这个选项一直无效,而且作者已经很久没改了。可以使用 @our-patches/postcss-px-to-viewport

安装

npm i @our-patches/postcss-px-to-viewport -D

配置 只需要在 postcss.config.js 中将 postcss-px-to-viewport 改为 postcss-px-to-viewport 即可 :::

3. 适配方案3:scale(推荐)

使用CSS3中的scale函数来缩放网页,这里我们将使用两种方案来实现:

  1. 方案一:直接根据宽度的比率进行缩放。(宽度比率=网页当前宽 / 设计稿宽)
<script>
window.onload = function () {triggerScale();window.addEventListener("resize", function () {triggerScale();});
};function triggerScale() {var targetX = 1920;var targetY = 1080;// 获取html的宽度和高度(不包含滚动条)var currentX =document.documentElement.clientWidth || document.body.clientWidth;// https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidthvar currentY =document.documentElement.clientHeight || document.body.clientHeight;// 1.缩放比例  3840 / 2160 => 2var ratio = currentX / targetX;var bodyEl = document.querySelector("body");// 2.需要修改缩放的原点 body { transform-origin: left top; }bodyEl.setAttribute("style", `transform:scale(${ratio})`);
}
</script>
  1. 方案二:动态计算网页宽高比,决定是是否按照宽度的比率进行缩放。
<script>
window.onload = function () {triggerScale();window.addEventListener("resize", function () {triggerScale();});
};function triggerScale() {var targetX = 1920;var targetY = 1080;var targetRatio = 16 / 9;var currentX =document.documentElement.clientWidth || document.body.clientWidth;var currentY =document.documentElement.clientHeight || document.body.clientHeight;// 1.缩放比例  3840 / 2160 => 2var ratio = currentX / targetX;var currentRatio = currentX / currentY;var transformStr = "";if (currentRatio > targetRatio) {ratio = currentY / targetY;transformStr = `transform:scale(${ratio}) translateX(-${targetX / 2}px); left:50%;`;} else {transformStr = `transform:scale(${ratio})`;}var bodyEl = document.querySelector("body");// 2.需要修改缩放的原点 body { transform-origin: left top; }bodyEl.setAttribute("style", transformStr);
}
</script>

3. Vue3 hooks封装 useScalePage

import { onMounted, onUnmounted } from 'vue';
import _ from 'lodash' /**大屏适配的 hooks*/
export default function useScalePage(option) {const resizeFunc = _.throttle(function() {triggerScale() // 动画缩放网页}, 100)onMounted(()=>{triggerScale()  // 动画缩放网页window.addEventListener('resize', resizeFunc)})onUnmounted(()=>{window.removeEventListener('resize', resizeFunc) // 释放})// 大屏的适配function triggerScale() {// 1.设计稿的尺寸let targetX = option.targetX ||  1920let targetY = option.targetY || 1080let targetRatio = option.targetRatio ||  16 / 9 // 宽高比率// 2.拿到当前设备(浏览器)的宽度let currentX = document.documentElement.clientWidth || document.body.clientWidthlet currentY = document.documentElement.clientHeight || document.body.clientHeight// 3.计算缩放比例let scaleRatio = currentX / targetX; // 参照宽度进行缩放 ( 默认情况 )let currentRatio = currentX / currentY // 宽高比率// 超宽屏if(currentRatio > targetRatio) {// 4.开始缩放网页scaleRatio = currentY / targetY // 参照高度进行缩放document.body.style = `width:${targetX}px; height:${targetY}px;transform: scale(${scaleRatio}) translateX(-50%); left: 50%`} else {// 4.开始缩放网页document.body.style = `width:${targetX}px; height:${targetY}px; transform: scale(${scaleRatio})`}}
}

4. 总结

三种适配方案的对比

  • vw 相比于 rem 的优势
    • 优势一:不需要去计算 htmlfont-size 大小,不需要给 html 设置 font-size,也不需要设置 bodyfont-size ,防止继承;
    • 优势二:因为不依赖 font-size 的尺寸,所以不用担心某些原因 htmlfont-size 尺寸被篡改,页面尺寸混乱;
    • 优势三vw 相比于 rem 更加语义化1vw1/100viewport 大小(即将屏幕分成 100 份); 并且具备 rem 之前所有的优点
  • vwrem 存在问题
    • 如果使用 remvw 单位时,在 JS 中添加样式时,单位需要手动设置 remvw
    • 第三方库的字体等默认的都是 px 单位,比如:elementecharts,因此通常需要层叠第三方库的样式。
    • 当大屏比例更大时,有些字体还需要相应的调整字号
  • scale 相比 vwrem 的优势
    • 优势一:相比于 vwrem,使用起来更加简单,不需要对单位进行转换。
    • 优势二:因为不需要对单位进行转换,在使用第三方库时,不需要考虑单位转换问题。
    • 优势三:由于浏览器的字体默认最小是不能小于 12px ,导致 remvw 无法设置小于 12 px的字体,缩放没有这个问题。

附送250套精选项目源码

源码截图

 源码获取:关注公众号「码农园区」,回复 【源码】,即可获取全套源码下载链接

这篇关于大屏适配方案汇总的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1077290

相关文章

SQLite3 在嵌入式C环境中存储音频/视频文件的最优方案

《SQLite3在嵌入式C环境中存储音频/视频文件的最优方案》本文探讨了SQLite3在嵌入式C环境中存储音视频文件的优化方案,推荐采用文件路径存储结合元数据管理,兼顾效率与资源限制,小文件可使用B... 目录SQLite3 在嵌入式C环境中存储音频/视频文件的专业方案一、存储策略选择1. 直接存储 vs

linux重启命令有哪些? 7个实用的Linux系统重启命令汇总

《linux重启命令有哪些?7个实用的Linux系统重启命令汇总》Linux系统提供了多种重启命令,常用的包括shutdown-r、reboot、init6等,不同命令适用于不同场景,本文将详细... 在管理和维护 linux 服务器时,完成系统更新、故障排查或日常维护后,重启系统往往是必不可少的步骤。本文

SpringBoot服务获取Pod当前IP的两种方案

《SpringBoot服务获取Pod当前IP的两种方案》在Kubernetes集群中,SpringBoot服务获取Pod当前IP的方案主要有两种,通过环境变量注入或通过Java代码动态获取网络接口IP... 目录方案一:通过 Kubernetes Downward API 注入环境变量原理步骤方案二:通过

Springboot3+将ID转为JSON字符串的详细配置方案

《Springboot3+将ID转为JSON字符串的详细配置方案》:本文主要介绍纯后端实现Long/BigIntegerID转为JSON字符串的详细配置方案,s基于SpringBoot3+和Spr... 目录1. 添加依赖2. 全局 Jackson 配置3. 精准控制(可选)4. OpenAPI (Spri

关于跨域无效的问题及解决(java后端方案)

《关于跨域无效的问题及解决(java后端方案)》:本文主要介绍关于跨域无效的问题及解决(java后端方案),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录通用后端跨域方法1、@CrossOrigin 注解2、springboot2.0 实现WebMvcConfig

Linux实现线程同步的多种方式汇总

《Linux实现线程同步的多种方式汇总》本文详细介绍了Linux下线程同步的多种方法,包括互斥锁、自旋锁、信号量以及它们的使用示例,通过这些同步机制,可以解决线程安全问题,防止资源竞争导致的错误,示例... 目录什么是线程同步?一、互斥锁(单人洗手间规则)适用场景:特点:二、条件变量(咖啡厅取餐系统)工作流

在Java中将XLS转换为XLSX的实现方案

《在Java中将XLS转换为XLSX的实现方案》在本文中,我们将探讨传统ExcelXLS格式与现代XLSX格式的结构差异,并为Java开发者提供转换方案,通过了解底层原理、性能优势及实用工具,您将掌握... 目录为什么升级XLS到XLSX值得投入?实际转换过程解析推荐技术方案对比Apache POI实现编程

Java实现本地缓存的常用方案介绍

《Java实现本地缓存的常用方案介绍》本地缓存的代表技术主要有HashMap,GuavaCache,Caffeine和Encahche,这篇文章主要来和大家聊聊java利用这些技术分别实现本地缓存的方... 目录本地缓存实现方式HashMapConcurrentHashMapGuava CacheCaffe

8种快速易用的Python Matplotlib数据可视化方法汇总(附源码)

《8种快速易用的PythonMatplotlib数据可视化方法汇总(附源码)》你是否曾经面对一堆复杂的数据,却不知道如何让它们变得直观易懂?别慌,Python的Matplotlib库是你数据可视化的... 目录引言1. 折线图(Line Plot)——趋势分析2. 柱状图(Bar Chart)——对比分析3

无法启动此程序因为计算机丢失api-ms-win-core-path-l1-1-0.dll修复方案

《无法启动此程序因为计算机丢失api-ms-win-core-path-l1-1-0.dll修复方案》:本文主要介绍了无法启动此程序,详细内容请阅读本文,希望能对你有所帮助... 在计算机使用过程中,我们经常会遇到一些错误提示,其中之一就是"api-ms-win-core-path-l1-1-0.dll丢失