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

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

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    请问一下响应式布局的JS如何适配PC端和移动端
    33
    0

    响应式布局一般用两套JS吗?如果用一套,怎么切换PC端和移动端不同的JS代码?(如不同的事件体系)

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 宁夜空 超级管理员 1楼

      响应式布局的JS可以通过监听window.innerWidth和window.innerHeight的变化来实现适配PC端和移动端。以下是一个简单的示例:

      ```javascript window.addEventListener('resize', function() { var width = window.innerWidth; var height = window.innerHeight;

      // 移动端的适配代码
      if (width < 600) {
          // 高于600px的宽度,布局为固定宽度
          var fixedWidth = '600px';
      } else {
          // 不低于600px的宽度,布局为相对宽度
          var fixedWidth = width / 2;
      }
      
      // PC端的适配代码
      var fixedWidth = '100%';
      

      }); ```

      在这个示例中,当窗口的宽度小于600px时,布局为固定宽度;当窗口的宽度大于或等于600px时,布局为相对宽度。你可以根据你的需求来调整这些值。

      注意,这个示例使用了百分比来设置fixedWidth,这意味着如果你的屏幕宽度改变,fixedWidth也会相应地改变。如果你的屏幕宽度不变,fixedWidth就不会改变。如果你需要在屏幕宽度不变的情况下,改变fixedWidth,你可以使用百分比、rem或em等其他单位。

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