#挑战每日一条沸点# DAY7：在Vue3项目中进行屏幕适配的两种方案：基于rem的适配方案和基于scale的适配方案。这两种方案旨在解决不同场景下的屏幕适配问题，让页面在不同设备上都能有良好的显示效果。
1、基于rem的适配方案：
rem单位：rem是相对于根元素（html/body）字体大小的单位，通常根元素的字体大小设置为10px，这样1rem就相当于10px。
适用场景：适用于不固定宽高比的Web应用，适合绝大部分业务场景。
依赖安装：需要安装 postcss-pxtorem 插件用于将像素单位生成rem单位，autoprefixer 用于处理浏览器前缀，以及 amfe-flexible 作为可伸缩布局方案。
配置文件：在项目根目录创建 postcss.config.js 文件，配置插件参数，包括对不同浏览器的兼容性。
项目重启：需要重启项目使配置生效。
2、基于scale的适配方案：
transform属性：使用CSS3的transform属性中的scale()方法实现元素的缩放效果，包括scaleX()、scaleY()和scale()。
适用场景：适用于固定宽高比的Web应用，如大屏或固定窗口业务应用。
新建resize.ts/js文件：新建一个用于处理窗口大小变化的函数，通过计算当前窗口大小与设计稿尺寸的比例，来决定是否进行缩放以保持固定比例。
设计稿尺寸和比例：指定设计稿的宽度和高度，计算所需保持的比例。
calcRate函数：根据窗口宽高比和设计稿比例，计算缩放值并应用到外层容器。
resize函数：在窗口大小改变时重新计算缩放值，通过定时函数避免频繁计算。
windowDraw和unWindowDraw函数：监听和取消监听窗口大小变化，分别绑定和解绑resize函数。
界面引入resize.ts/js：在相关界面中引入resize函数，根据缩放值来适配页面内容。
1、基于rem的适配方案：
rem单位：rem是相对于根元素（html/body）字体大小的单位，通常根元素的字体大小设置为10px，这样1rem就相当于10px。
适用场景：适用于不固定宽高比的Web应用，适合绝大部分业务场景。
依赖安装：需要安装 postcss-pxtorem 插件用于将像素单位生成rem单位，autoprefixer 用于处理浏览器前缀，以及 amfe-flexible 作为可伸缩布局方案。
配置文件：在项目根目录创建 postcss.config.js 文件，配置插件参数，包括对不同浏览器的兼容性。
项目重启：需要重启项目使配置生效。
2、基于scale的适配方案：
transform属性：使用CSS3的transform属性中的scale()方法实现元素的缩放效果，包括scaleX()、scaleY()和scale()。
适用场景：适用于固定宽高比的Web应用，如大屏或固定窗口业务应用。
新建resize.ts/js文件：新建一个用于处理窗口大小变化的函数，通过计算当前窗口大小与设计稿尺寸的比例，来决定是否进行缩放以保持固定比例。
设计稿尺寸和比例：指定设计稿的宽度和高度，计算所需保持的比例。
calcRate函数：根据窗口宽高比和设计稿比例，计算缩放值并应用到外层容器。
resize函数：在窗口大小改变时重新计算缩放值，通过定时函数避免频繁计算。
windowDraw和unWindowDraw函数：监听和取消监听窗口大小变化，分别绑定和解绑resize函数。
界面引入resize.ts/js：在相关界面中引入resize函数，根据缩放值来适配页面内容。
展开
评论
1