javascript - 当我切换到移动 View 时我的按钮发生了什么？

Question

由于时间问题，我下载了一个名为Horizons的模板通过 Templated为了使用CSS。

此 CSS 使用 Javascript 初始化移动 View ，使按钮从内联变成 block 状。

起初一切都是阳光和彩虹，但突然间这发生在我的按钮上:

Basically they go out of the div Like so. (outlines of div and button)我不知道该怎么办。因为它不像添加 @media 和屏幕命令。

我有一个

mobile:{ 
  range: '-640', 
  href: 'css/style-mobile.css', 
  containers: '90%',

  grid: { 
    gutters: 15, 
    collapse: 2 
  } 
}

和一个

body, input, select, textarea {
    font-size: 11pt;
}

.button {
    display: inline-block;
    width: 100%;
    min-width: 0;
    padding: 0;
    font-size: 1.2em;
    line-height: 2.75em;
    height: 2.75em;
    margin: 1.5em


}

在 style-mobile.css 中。

在我的常规 style.css 中我有:

input[type="submit"],
input[type="reset"],
input[type="button"],
.button {
    -moz-appearance: none;
    -webkit-appearance: none;
    -o-appearance: none;
    -ms-appearance: none;
    appearance: none;
    -moz-transition: background-color 0.2s ease-in-out;
    -webkit-transition: background-color 0.2s ease-in-out;
    -o-transition: background-color 0.2s ease-in-out;
    -ms-transition: background-color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out;
    background: #4368b1;
    border-radius: 40px;
    border: 0;
    color: white;
    cursor: pointer;
    display: inline-block;
    padding: 0.80em 2em;
    text-align: center;
    text-decoration: none;
    font-size: 1.4em;
    font-weight: 600;
    min-width: 9em;
}

不知道这是否会影响，但我正在运行我的索引:

<?php
require "header.php";

以及我遇到问题的页面中我 body 的其余部分。

我不确定该怎么做。感谢您的帮助。

Answer 1

我在 html css php 方面也很新，但我认为你的按钮之所以如此，是因为这个

min-width: 9em; --> min-width 70%;

我不太熟悉 em，但我宁愿使用 % 而不是 em 然后在需要时添加填充。

而且我宁愿使用 bootstrap 或 materialize.css 而不是 horizo​​ns 来更好地使用网格系统。但这仍然取决于您自己的喜好。