问题:界面用纯html+css+js实现,项目部署需要部署在不同比例的屏幕上,如何来实现屏幕的适配?
在找解决办法的时候,有rem、vw、scale
rem:发现只能根据屏幕宽度适配
scale: 根据设计稿的比例进行缩放,会产生白边,客户不喜欢
vw:最后决定用vw、vh,因为这两个是相对于视口进行适配
思路:用vw、vh就需要进行像素转换(px->vw/vh),然而css文件并不能对像素进行转换(除非手动转换),所以我们需要用到sass的math函数,html文件是不能直接引入sass文件,所以中间需要插件(live sass compiler)对sass文件进行转换,转换的css文件引入html
步骤1:安装插件live sass compiler
![在这里插入图片描述](https://img-blog.csdnimg.cn/4fdb74678b3a4397be3917f895146b19.png)
步骤2:新建一个scss(注意是scss不是sass),我直接把math函数写道scss里面了
index.scss
@use "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;
}
//下面直接写css样式
然后在vscode的右下方会出现watch sass 点击对scss文件进行监听,只要scss文件改变,就是对其重新编译,css文件就会相应更新,记得把css文件引入html
![在这里插入图片描述](https://img-blog.csdnimg.cn/3af308bbeab9496b8430bd57116c4ea8.png)
步骤3:math函数用法
@use "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;
}
.left {
width: vw(433);//里面的宽度就是设计稿里元素的宽度
height: vh(933);
position: relative;
background-image: url("../images/page2/bg_left.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}