【sass写的媒体查询，编译成css文件正确，但在浏览器打开后达到对应尺寸不起作用 _媒体查询 _sass 】

sass写的媒体查询，编译成css文件正确，但在浏览器打开后达到对应尺寸不起作用

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(0)

媒体查询 sass

详细描述

截图

代码

//计算rem基准字体
$rem-base-font-size:100px;
//UI设计图的分辨率宽度
$UI-width:720px;
// 需要适配的屏幕宽度
$device-width:320px,375px,425px,768px;

// 根据不同设备的屏幕宽度，定义<html>的基准font-size
@mixin html-font-size {
    @each $current-width in $device-width {
        @media only screen and (max-width:$current-width) {
            $x:$UI-width/$current-width; // // 计算出是几倍屏
            font-size: $rem-base-font-size/$x;
        }
    }
}
@include html-font-size();

@media only screen and (max-width: 320px) {
  font-size: 44.44444px;
}

@media only screen and (max-width: 375px) {
  font-size: 52.08333px;
}

@media only screen and (max-width: 425px) {
  font-size: 59.02778px;
}

@media only screen and (max-width: 768px) {
  font-size: 106.66667px;
}

编辑于2024-11-01