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

Question

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

我该怎么做？

移动按钮桌面按钮

Answer 1

您可以使用@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>

运行代码段，然后单击整页查看差异。

Answer 2

您尝试过媒体查询吗？

例如：

@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;
}

我是scs btw.

以下是CSS中的等价物：

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

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

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