账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    项目css使用less,做移动端适配的时候媒体查询问题
    • 2020-01-01 00:00
    • 11
    19
    0
    @puzzleWidth: 5.5rem;
    @puzzleHeight: 9.16rem;
    @puzzleHeightchu: @puzzleHeight/5;
    @puzzleWidthchu: @puzzleWidth/3;
    @media screen and (min-width: 400px) {
      @puzzleWidth: 6.5rem;
      @puzzleHeight: 10.8333rem;
    }

    就像这种,因为之后会有挺多的计算,所以想列一个变量,这样子变量做媒体查询允许吗,如果不行的话该写在哪里

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    • 看透愛情看透妳 普通会员 1楼

      在使用less进行移动端适配时,可能会遇到一些问题。以下是一些常见的问题及其解决方案:

      1. 媒体查询不起作用:确保你的less文件已经被正确编译,并且less文件中包含对媒体查询的定义。如果你没有正确地定义媒体查询,那么less编译器将无法识别媒体查询。

      解决方案:确保你的less文件正确编译,并且less文件中包含对媒体查询的定义。你可以在less文件的底部添加以下代码:

      @media screen and (max-width: 768px) { /* 在这个媒体查询下做你的适配操作 */ }

      1. 不支持某个特定的屏幕尺寸:less文件的媒体查询可能会失效,因为你可能没有在你的less文件中定义所有支持的屏幕尺寸。例如,如果你在媒体查询中只定义了屏幕宽度小于等于768px的样式,那么对于屏幕宽度大于768px的设备,你的样式将不会生效。

      解决方案:确保你的less文件中的所有媒体查询都定义了所有的屏幕尺寸。你可以使用@media screen and (min-width: 768px)@media screen and (max-width: 768px)来定义不同屏幕尺寸的样式。

      1. 编译错误:如果你的less文件编译失败,那么你可能没有正确地编译less文件。你可以使用lessc命令来编译less文件,然后检查编译结果。

      解决方案:确保你的less文件正确编译,并且less文件中包含对媒体查询的定义。你可以在less文件的底部添加以下代码:

      @media screen and (max-width: 768px) { /* 在这个媒体查询下做你的适配操作 */ }

      如果以上方法都不能解决问题,那么可能需要检查你的less文件,确保所有的媒体查询都定义了所有的屏幕尺寸,并且你的less文件没有错误。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部