對於一個元素,我根據螢幕寬度有兩個不同的文字。當螢幕寬度小於或等於400px時,我想顯示narrow
。當螢幕寬度大於400px時,我想顯示large
。
這裡是程式碼:https://jsbin.com/qagetoseva/edit?html,css,output
#但問題是,當寬度為400px
時,這段程式碼什麼都沒有顯示,有誰知道如何修改嗎?
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <style> .me { height: 100vh; } </style> </head> <body> <div class="hide-if-large">narrow</div> <div class="hide-if-narrow">large</div> </body> </html>
@media screen and (min-width: 400px) { .hide-if-large { display:none } } @media screen and (max-width: 400px) { .hide-if-narrow { display: none; } }
親愛的朋友,您的 CSS 媒體查詢有問題。
}
我將第二個媒體查詢更改為 1024px 以適應平板電腦尺寸。您應該為更大的螢幕建立一個新的媒體查詢,例如 min-width 1025px