根据屏幕大小显示不同的按钮

Question

我有两个 html 按钮的代码，一个用于桌面，另一个用于移动。我希望能够根据页面是从桌面还是移动设备访问来显示其中一个。

我该怎么做？

移动按钮桌面按钮

Answer 1

你尝试过媒体查询吗？

例如：

@mixin sm {
  @media screen and (min-width: 360px) {
    @content;
  }
}

@mixin md {
  @media screen and (min-width: 667px) {
    @content;
  }
}

@mixin lg {
  @media screen and (min-width: 834px) {
    @content;
  }
}

@mixin xlg {
  @media screen and (min-width: 1024px) {
    @content;
  }
}

那么你的使用方式如下：

// medium size screen
@include md {
    .button_class {
      height: 10px;
  }

// large size screen
@include lg {
    .button_class {
      height: 100px;
  }

顺便说一句，这是 scss。

这是 CSS 中的等价物：

@media screen and (min-width: 834px) {
   .button_class {
      height: 10px;
  }
}


@media screen and (min-width: 1024px) {
   .button_class {
      height: 100px;
  }
}

然后尝试调整浏览器大小。

Answer 2

您可以像这样使用 @media 查询：

button.first {
  display: none;
}

button.second {
  display: inline-block;
}

@media all and (max-width: 700px) {
  button.first {
    display: inline-block;
  }
  button.second {
    display: none;
  }
}

<button class="first">First Button</button>
<button class="second">Second Button</button>

运行代码段并单击整页以查看差异。

根据屏幕大小显示不同的按钮

Display different buttons based on screen size

html

javascript

css

responsive-design