html tabs改变长宽,html - CSS tabs width auto-resize - Stack Overflow

I am creating a new layout to learn about flex, some kind of holy grail but in flex. The problem I am facing is with the tabs nav, because I want the layout to work fine in PC and mobile I need the tabs to autoresize.

No scripts no plugins no complications, clean and simple CSS only.

I want the layout to display the tabs nav with a maximun of 1281 px width on PC and if the screen is smaller like on mobiles or tablets it will use the full with of small devices.

I am doing it this way:

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

Welcome

Airdrop

Presale

Roadmap

Welcome

London is the capital city of England.

Airdrop

Paris is the capital of France.

Presale

Paris is the capital of France.

Roadmap

Tokyo is the capital of Japan.

footer

The problem is that using the width 1281 in css it does not autoresize in small screens like mobile, if I set % width it display wrong on small devices too...

What I need is:

On pc max 1281 px width, on mobile 98% of the device width. The Tabs is the problem. I want the tabs to be a 25% of any screen resolution so they always display inline blocks like.

What is the problem ?

Link to Fiddle for real time demo

https://jsfiddle.net/vzd8re35/