兴义市网站建设,河北网站seo优化,临淄58同城招聘信息网,内容展示型网站 设计特点背景#xff1a;
项目中总有很多界面 需要做大小屏幕适配的兼容#xff0c;那么怎么能够快速实现这一方案呢#xff0c;SASS的出现是个非常好用的工具#xff0c;可以通过自定义函数#xff0c;来实现自动计算。
方案#xff1a;vue3 vite sass
具体实现细节#x…背景
项目中总有很多界面 需要做大小屏幕适配的兼容那么怎么能够快速实现这一方案呢SASS的出现是个非常好用的工具可以通过自定义函数来实现自动计算。
方案vue3 vite sass
具体实现细节
创建utils.scss 文件我的项目中路径 为 src\styles\utils.scss配置vite.config.js ,实现utils.scss的全局注册就可以在每个vue文件中快乐的使用了
具体代码
1. utils.scss文件如下
//使用scss的math函数https://sass-lang.com/documentation/breaking-changes/slash-divuse sass:math;//默认设计稿的宽度
$designWidth :1920;
//默认设计稿的高度
$designHeight: 1080;//px转为vw的函数function vw($px) {return math.div($px, $designWidth) * 100vw;
}//px转为vh的函数function vh($px) {return math.div($px, $designHeight) * 100vh;
}
2. vite.config.js 文件如下
export default defineConfig({css: {preprocessorOptions: {scss: {additionalData: import /styles/utils.scss;}}},})
3. vue中的使用方式 直接使用vw设置宽度vh设置高度即可不需要添加px,直接写数值 img {width: vw(130);height: vh(64);}
