十月十号
2021-07-04 22:56
采纳率: 100%
浏览 67

less+媒体查询中更改变量

想在屏幕大小改变时更改less中的变量,less代码如下:

@center-size:6rem;
@media (max-height:720px){
      @center-size:15rem;
}

我试过这样好像不行,求解正确方式。

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • yycgis 2021-07-04 23:16
    已采纳

    LESS目前无法做到这一点,尽管它在技术上可行。此功能已在GitHub issue Less variables in media queries中提出。
    也是这个问题,请参见:
    CSS pre-processor with a possibility to define variables in a @media query
    https://stackoverflow.com/questions/14139067/css-pre-processor-with-a-possibility-to-define-variables-in-a-media-query

    LESS将您的媒体查询编译为实际媒体查询,因此在编译时没有指示哪个媒体查询与浏览器相关。
    编译后,你只需要CSS不会少,所以你不能再有变量了。
    你可以做到这一点,但它并不很优雅:

    @base_width: 100px; 
    
    @media all and (max-width: 768px) { 
        .something { 
         width: @base_width; 
        } 
    } 
    
    @media all and (min-width: 769px) { 
        .something { 
         width: @base_width * 2; 
        } 
    }
    
    已采纳该答案
    1 打赏 评论

相关推荐 更多相似问题