选项卡式导航菜单

Question

我正在研究W3Schools选项卡和导航菜单部分。我创建了一个选项卡式导航菜单，希望对此做出响应，但无法弄清楚该如何做。我相信它将涉及@media查询的使用，但是我不确定到底该怎么做。下面是我的代码。一些帮助将不胜感激！

HTML：

<div class="tab">
<button class="tablinks" onclick="openCity(event, 'Red')">Red</button>
<button class="tablinks" onclick="openCity(event, 'Blue')">Blue</button>
<button class="tablinks" onclick="openCity(event, 'Green')">Green</button>
</div>
</div>

<div id="Red" class="tabcontent">
<p>Test</p>
<p><b><ins>2018</ins></b></p>
<ul>
<li><a href=#>Test1</a></li>
</div>

<div id="Blue" class="tabcontent">
<p>Test2</p> 
</div>

<div id="Green" class="tabcontent">
<p>Test3</p>
</div>

<script>
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";
}
</script>  

CSS：

 /* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: black;
max-width: 75%;
text-align: center;
margin: auto;
}

/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 20px;
width: 33.1%;
color: white;
font-weight: bold;
font-family: arial;
}

/* Change background color of buttons on hover */
.tab button:hover {
background-color: slategray;
}

/* Create an active/current tablink class */
.tab button.active {
background-color: red;
}

/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
font-size: 18px;
}