![](/img/trans.png)
[英]why @media only screen and (min-width: 768px) also apply for screen width less than 768px
[英]Remove text and only leave icon under @media(min-width: 768px)
我在我的網頁上顯示了一個選項卡菜單。 然而,當調整大小時,我遇到了一個意想不到的行為,因此我的目標是刪除文本並只留下 fa 圖標,當設備是手機時,基本上@media(min-width:768px)。
這是菜單的樣子:
<div>
<div class="d-flex flex-row text-white align-items-stretch text-center">
<div class="port-item p-4 bg-primary" data-toggle="collapse" data-target="#home">
<i class="fa fa-home d-block"></i> Home
</div>
<div class="port-item p-4 bg-success" data-toggle="collapse" data-target="#resume">
<i class="fa fa-graduation-cap d-block"></i> Resume
</div>
<div class="port-item p-4 bg-warning" data-toggle="collapse" data-target="#portfolio">
<i class="fa fa-folder-open d-block"></i> Portfolio
</div>
<div class="port-item p-4 bg-danger" data-toggle="collapse" data-target="#contact">
<i class="fa fa-envelope d-block"></i> Contact
</div>
</div>
</div>
當設備為@media@media(min-width:768px) 時,我想刪除這些名稱 Home、Contact、Resume、Portfolio。
這是我的@media 查詢當前的樣子:
@media (max-width: 768px) {
#main-header .port-item {
width: 25%;
}
#main-header .port-item .fa {
font-size: 1em;
}
.map-responsive {
margin-top: 15px;
}
}
這是我所指的圖片:
在文本周圍添加一個 span 標簽,並使其在媒體查詢中display: none
,例如@media (max-width: 768px)
。
HTML:
<div>
<div class="d-flex flex-row text-white align-items-stretch text-center">
<div class="port-item p-4 bg-primary" data-toggle="collapse" data-target="#home">
<i class="fa fa-home d-block"></i> <span class="item-label">Home</span>
</div>
<div class="port-item p-4 bg-success" data-toggle="collapse" data-target="#resume">
<i class="fa fa-graduation-cap d-block"></i> <span class="item-label">Resume</span>
</div>
<div class="port-item p-4 bg-warning" data-toggle="collapse" data-target="#portfolio">
<i class="fa fa-folder-open d-block"></i> <span class="item-label">Portfolio</span>
</div>
<div class="port-item p-4 bg-danger" data-toggle="collapse" data-target="#contact">
<i class="fa fa-envelope d-block"></i> <span class="item-label">Contact</span>
</div>
</div>
</div>
CSS:
@media (max-width: 768px) {
#main-header .port-item {
width: 25%;
}
#main-header .port-item .fa {
font-size: 1em;
}
.map-responsive {
margin-top: 15px;
}
#main-header .port-item .item-label {
display: none;
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.