站長資訊網
css媒體查詢失效的解決辦法：1、修改語法如“@media screen and (max-width:768px){…}”；2、在html頭文件添加必要的meta標簽；3、將媒體查詢語句放在原css文檔后面即可。
本教程操作環境：Windows10系統、css3版、DELL G3電腦
css媒體查詢失效怎么辦？
CSS @media媒體查詢無效
用@media媒體查詢寫的CSS樣式無效？
1.問題
用@media媒體查詢寫的CSS樣式對html無效。
2.解決
嘗試一： 語法規范——‘and’ 和 ‘(’ 之間需要一個空格
@media screen and (max-width:768px){ body { padding-top:150px; padding-bottom: 20px; } }
登錄后復制
嘗試二：環境——保證html頭文件添加了必要的meta標簽
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/index.css"> </head>
登錄后復制
嘗試三：優先級——將媒體查詢語句放在原css文檔后面
body{ padding-top:50px; padding-bottom:20px; } @media screen and (max-width:768px){ body { padding-top:150px; padding-bottom: 20px; } }
登錄后復制
推薦學習：《css視頻教程》
