淘先锋技术网

首页 1 2 3 4 5 6 7

我遇到了一个问题,我的笔记本电脑和PC的屏幕分辨率相同,都是1920x1080,但在Windows中有一个名为“更改文本、应用和其他项目的大小”的设置在我的电脑上,它被设置为100%,而在笔记本电脑上,它被设置为125%。有没有办法在CSS中设置一个参数,让用户用125%输入时,浏览器将网页缩小25%?我将非常感谢任何帮助。下面是一个测试组件,其中笔记本电脑和PC上的文本大小不同

SCSS:

$sizeImg: 75%;

.test {
    @apply w-screen h-screen flex;
  
    .cover {
        @apply w-[50%] relative flex justify-end items-center;
        
        &:before {
            content: '';
            @apply bg-slate-400 absolute;
            width: calc(100% - #{$sizeImg} / 2);
            height: 100%;
            left: 0;
        }
    }

    .text {
        @apply w-full bg-slate-600;
    }
}

组件:

import React, { useState } from 'react'
import './Test.scss';
import image from '../../assets/images/MainPhoto.png'

function Test() {
  return (
    <div className='test'>
      <div className="cover">
        <p>text</p>
      </div>
      <div className="text"></div>
    </div>
  )
}

export default Test;