Redian新闻
>
屏幕适配的两种方案,超详细!

屏幕适配的两种方案,超详细!

公众号新闻

推荐关注↓

作者:潇潇夜雨丶

https://juejin.cn/post/7147897102398390308

前言

最近项目组小美同学貌似遇到了一个棘手的问题,总是一副闷闷不乐的样子。

本着都是一个项目组,应该互相帮助、共用解决问题的用意,我向小美发出了信息。

我:“看你最近一直不怎么开心,遇到什么问题了吗?”

小美:“最近一直在查阅vue3项目屏幕适配的资料,发现网上资料都是vue2+webpack有关的,不知道如何适配vite项目?o(╥﹏╥)o”

我:“OK,交给哥了,我来帮你摆平!”

小美:“❤( ´・ᴗ・` )❤”

觉得文章不错、或对自己开发有所帮助,欢迎点赞收藏!❤❤❤

基于rem的适配方案

rem是什么?

rem是指相对于根元素的字体大小的单位,在日常开发过程中我们通常把根元素(html/body)的字体设置为10px,方便于我们计算(此时子元素的1rem就相当于10px)。

适用场景

不固定宽高比的Web应用,适用于绝大部分业务场景

项目实战

  1. 安装依赖
npm i postcss-pxtorem autoprefixer amfe-flexible --save-dev

postcss-pxtorem 是PostCSS的插件,用于将像素单元生成rem单位 autoprefixer 浏览器前缀处理插件 amfe-flexible 可伸缩布局方案 替代了原先的lib-flexible 选用了当前众多浏览器兼容的viewport

  1. 项目根目录创建 postcss.config.js 文件
module.exports = {
 plugins: {
  autoprefixer: {
   overrideBrowserslist: [
    "Android 4.1",
    "iOS 7.1",
    "Chrome > 31",
    "ff > 31",
    "ie >= 8",
    "last 10 versions"// 所有主流浏览器最近10版本用
   ],
   gridtrue,
  },
  "postcss-pxtorem": {
   rootValue192// 设计稿宽度的1/ 10 例如设计稿按照 1920设计 此处就为192
   propList: ["*""!border"], // 除 border 外所有px 转 rem
   selectorBlackList: [".el-"], // 过滤掉.el-开头的class,不进行rem转换
  },
 },
};
  1. main.ts/js 文件中导入依赖
import "amfe-flexible/index.js";
  1. 项目重启

基于scale的适配方案

在CSS3中,我们可以使用transform属性的scale()方法来实现元素的缩放效果。缩放,指的是“缩小”和“放大”的意思。

  • transform: scaleX(x); / 沿x轴方向缩放/
  • transform: scaleY(y); / 沿y轴方向缩放/
  • transform: scale(); / 同时沿x轴和y轴缩放/

适用场景

固定宽高比的Web应用,如大屏或者固定窗口业务应用

项目实战

  1. 新建resize.ts/js文件
import { ref } from "vue";

export default function windowResize({
 // * 指向最外层容器
 const screenRef = ref();
 // * 定时函数
 const timer = ref(0);
 // * 默认缩放值
 const scale = {
  width"1",
  height"1",
 };
    
 // * 设计稿尺寸(px)
 const baseWidth = 1920;
 const baseHeight = 1080;

 // * 需保持的比例(默认1.77778)
 const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5));
 const calcRate = () => {
  // 当前宽高比
  const currentRate = parseFloat(
   (window.innerWidth / window.innerHeight).toFixed(5)
  );
  if (screenRef.value) {
   if (currentRate > baseProportion) {
    // 表示更宽
    scale.width = (
     (window.innerHeight * baseProportion) /
     baseWidth
    ).toFixed(5);
    scale.height = (window.innerHeight / baseHeight).toFixed(5);
    screenRef.value.style.transform = `scale(${scale.width}${scale.height})`;
   } else {
    // 表示更高
    scale.height = (
     window.innerWidth /
     baseProportion /
     baseHeight
    ).toFixed(5);
    scale.width = (window.innerWidth / baseWidth).toFixed(5);
    screenRef.value.style.transform = `scale(${scale.width}${scale.height})`;
   }
  }
 };

 const resize = () => {
  clearTimeout(timer.value);
  timer.value = window.setTimeout(() => {
   calcRate();
  }, 200);
 };

 // 改变窗口大小重新绘制
 const windowDraw = () => {
  window.addEventListener("resize", resize);
 };

 // 改变窗口大小重新绘制
 const unWindowDraw = () => {
  window.removeEventListener("resize", resize);
 };

 return {
  screenRef,
  calcRate,
  windowDraw,
  unWindowDraw,
 };
}

  1. 相关界面引入resize.ts/js
<template>
    <div class="screen-container">
        <div class="screen-content" ref="screenRef">
            <span class="screen-title">基于scale的适配方案</span>
            <img class="screen-img" src="https://img2.baidu.com/it/u=1297807229,3828610143&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281" alt="">
        </div>
    </div>
</template>


<script setup lang="ts">
import windowResize from '../../utils/resize';
import {onMounted, onUnmounted} from 'vue';

const { screenRef, calcRate, windowDraw, unWindowDraw } = windowResize()

onMounted(() => {
    // 监听浏览器窗口尺寸变化
    windowDraw()
    calcRate()
})

onUnmounted(() => {
    unWindowDraw();
})

</script>


<style lang="scss" scoped>
.screen-container {
    height: 100%;
    background-color: lightcyan;
    display: flex;
    justify-content: center;
    align-items: center;

    .screen-content {
        width: 1920px;
        height: 1080px;
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        .screen-title {
            font-size: 32px;
        }

        .screen-img {
            margin-top: 20px;
        }
    }
}
</style>

- EOF -




推荐阅读  点击标题可跳转

0、极客专属:几十款程序员秒懂的卫衣

1、支付宝大整改,花呗、借呗退出江湖

2、从前,有两个卖水果的公司……

3、今年这情况,咱还是留个心眼吧!


关注「程序员的那些事」加星标,不错过圈内事

点赞和在看就是最大的支持❤️

微信扫码关注该文公众号作者

戳这里提交新闻线索和高质量文章给我们。
相关阅读
已售300份!CFA三级笔记竟然可以这么详细!恭喜了!超详细IPO实战教学指南正式上线!(建议收藏)经济发展不好的内在原因China’s open-door policy牛人在此!CFA三级笔记竟然可以这么详细!师妹被网上的protocol坑了无数次,不如来看中科院博士30+实验超详细讲解卖爆啦!超详细的CFA三级笔记!好评满满!超详细的网络抓包神器 tcpdump 使用指南移居英国的两种方法收藏:美国Gifted资优班考试CogAT超详细介绍错误的例子证明错误的结论:论“中国队大胜美国队与中国队大败美国队”宇宙人(1158期)袁家军不再兼任浙江省委书记;黄克智院士逝世;快舟十一号遥二运载火箭发射成功;在陨石中发现地球上未见的两种矿物二战总分330+AW5.5,两个月V155→163超详细经验贴!!雇佣兵是人道援助还是搅动战争移居英国的两种方法!Vlog|巴黎最美火车站,超详细的旅行攻略!加拿大牙科补贴开放申请!每个娃最多$650:收好这份超详细图文教程这两种方法测试国人的心,你多半会凉透骨髓详细!7大类数据分析报告写作指南挂科收到学校警告信?你需要这份超详细的Show Cause补救指南Zabbix 介绍及部署(超详细讲解)紧急扩散!抖音疯传 已经触犯法律 华人常买的两种车已经被盯上……英国医学专业太难申!超详细面试攻略&题库帮你来助阵!找到职场发展“最佳路线图”的两种方法1月8日后回国不再需要隔离,想邀请父母朋友来英国旅游?超详细的英国探亲、旅游签证申请流程汇总!WB、RNA抽提 、transwell 实验、PI染色等40+个实验,巨详细!(含试剂推荐)58岁女人为什么需要小情人?《悠悠岁月》(6)飞来新加坡打mRNA,和当年通宵排队打科兴的两种人群,都是一个心理[日签] 国人身上最缺乏的两种精神超详细的 Wireshark 使用教程已售500份!超详细的CFA三级笔记!好评满满!有救啦!中科院博士30+实验超详细讲解,实验protocol必须安排上!一个人带宝宝坐飞机的超详细攻略
logo
联系我们隐私协议©2024 redian.news
Redian新闻
Redian.news刊载任何文章,不代表同意其说法或描述,仅为提供更多信息,也不构成任何建议。文章信息的合法性及真实性由其作者负责,与Redian.news及其运营公司无关。欢迎投稿,如发现稿件侵权,或作者不愿在本网发表文章,请版权拥有者通知本网处理。