时间戳

首页 > 解决方案 > 如何使按钮标签在移动视图中可见

html - 如何使按钮标签在移动视图中可见

问题描述

在我的博客中，我以两种不同的方式自定义了按钮标签，它们的代码如下：

    .button1 {
border: 2px solid rgb(0, 0, 0);
box-sizing: inherit; 
background-color: #ffffff; 
margin-right: 1.7px; 
color: black; 
font-size: 18px;
font-weight: 980;
padding: 6px 32px;
text-align: center;
transition: all 0.3s ease-in-out 0s;
width: 96.6px;
text-decoration: none;
line-height: 22px; 
font-size: 16px;
font-family: domine;
display: inline-table;
}
.button2 { 
border: 2px solid rgb(255, 87, 51);
background-color: #FF5733;
box-sizing: inherit;
margin-right: 1.7px; 
color: white; 
font-size: 18px;
font-weight: 980;
padding: 6px 42px;
text-align: center;
transition: all 0.3s ease-in-out 0s;
width: 96.6px;
text-decoration: none;
line-height: 22px; 
font-size: 16px;
font-family: domine;
display: inline-table;}
.button2:hover {
  background-color: #FF5733;
  color: #000000;}

但是有一个问题，我所做的自定义在移动视图中不可见，它显示为默认自定义。我应该如何将这些自定义实现到移动视图？帮我。

顺便说一句，我使用这些代码： 

  @media screen and (max-width: 390px) {
.button2 { padding: 6px 32px;width: 84.6px;font-size: 16px;display: inline-table;
}
@media screen and (max-width: 390px) {
  .button1 { width: 76.6px;}
}}

使按钮标签自定义在移动视图中可见。我已经将这些代码粘贴在博主博客的 CSS 区域，但在移动视图中没有看到任何效果，如果我使用错误的代码或将代码粘贴到错误的位置，请帮助我。

标签： htmlcsscustomizationblogger

解决方案

首先，这是一件简单的事情，但很多人都做错了：确保将@media 代码放在其他代码的下方。其次，如果您有相同的@media 屏幕和 (max-width: 390px)，为什么不将两个按钮样式放在同一个@media 中？像这样：

@media screen and (max-width: 390px) {
   .button2 { padding: 6px 32px;width: 84.6px;font-size: 16px;display: inline-table;
    }
   .button1 { width: 76.6px;}
}

哦，这个 css 应该使用模板的编辑 html 选项放置。

推荐阅读