CSS 标签宽度自动调整大小

Question

我正在创建一个新布局来了解 flex，这是 flex 中的圣杯。我面临的问题是标签导航，因为我希望布局在 PC 和移动设备上都能正常工作，我需要标签自动调整大小。

没有脚本没有插件没有复杂性，干净简单 CSS 只有。

我希望布局在 PC 上显示最大宽度为 1281 像素的选项卡导航，如果屏幕较小（如手机或平板电脑），它将使用小型设备的全部内容。

我是这样做的：

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

@charset "UTF-8";
html,
body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  background: #fff;
}

body {
  display: flex;
  flex-direction: column;
}

header {
  height: 75px;
  margin: 0 auto;
}

main {
  flex: auto;
  margin: 0 auto;
}

.contenido {
  width: 1280px;
  background: #212121;
  height: auto;
  border-radius: 4px;
  border: 2px solid #000000;
  padding: 10px;
}


/* Style the tab */

.tab {
  overflow: hidden;
  border-radius: 4px;
  margin: 0 auto;
  text-align: center;
  border: 1px solid #555555;
  background-color: #212121;
}


/* Style the buttons inside the tab */

.tab button {
  background-color: #212121;
  display: inline-block;
  border: none;
  outline: none;
  cursor: pointer;
  height: 100px;
  width: 20%;
  transition: 0.3s;
  font-size: 17px;
  color: #fff;
}


/* Change background color of buttons on hover */

.tab button:hover {
  background-color: #ddd;
}


/* Create an active/current tablink class */

.tab button.active {
  background-color: orange;
  color: #fff;
}


/* Style the tab content */

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

footer {
  height: 25px;
  margin: 0 auto;
}

<header>header</header>
<main>
  <div class="contenido">
    <div class="tab">
      <button class="tablinks" onclick="openCity(event, 'welcome')" id="defaultOpen">Welcome</button>
      <button class="tablinks" onclick="openCity(event, 'airdrop')">Airdrop</button>
      <button class="tablinks" onclick="openCity(event, 'presale')">Presale</button>
      <button class="tablinks" onclick="openCity(event, 'roadmap')">Roadmap</button>
    </div>
    <div id="welcome" class="tabcontent">
      <h3>Welcome</h3>
      <p>London is the capital city of England.</p>
    </div>
    <div id="airdrop" class="tabcontent">
      <h3>Airdrop</h3>
      <p>Paris is the capital of France.</p>
    </div>
    <div id="presale" class="tabcontent">
      <h3>Presale</h3>
      <p>Paris is the capital of France.</p>
    </div>
    <div id="roadmap" class="tabcontent">
      <h3>Roadmap</h3>
      <p>Tokyo is the capital of Japan.</p>
    </div>
  </div>
</main>
<footer>footer</footer>

问题是在 css 中使用宽度 1281 它不会在移动设备等小屏幕上自动调整大小，如果我设置 % 宽度它在小设备上也会显示错误...

我需要的是：

在电脑上最大宽度为 1281 像素，在移动设备上为设备宽度的 98%。标签是问题所在。我希望选项卡是任何屏幕分辨率的 25%，以便它们始终显示内联块，例如。

有什么问题？

Link 到 Fiddle 实时演示 https://jsfiddle.net/vzd8re35/

Answer 1

您可以尝试将最大宽度设置为 1280 像素，然后在同一元素上将宽度设置为 100%，如下所示：

.contenido {
    max-width: 1280px;
    width: 100%;
}

这意味着包装纸的最大宽度为 1280 像素，并且只能增长到该宽度的 100% 或更小。

CSS 标签宽度自动调整大小

CSS tabs width auto-resize

html

css

jquery

flexbox

html5-canvas