做完頁面后，用手機打開看后發現首頁背景圖變小了，留有空白，就是試著使用了媒體查詢@media
寬度小于768px的使用手機版背景圖，寬度大于768px的使用PC版背景圖，
1 /*背景圖片*/ 2 3 @media screen and (max-width: 768px) { 4 .body_img { 5 position: fixed; 6 right:0px; 7 top:0px; 8 width: 100%; 9 height: 100%; 10 z-index:-9999; 11 background: url(body_bg_sj.jpg) center top no-repeat; 12 } 13 } 14 @media screen and (min-width: 768px) { 15 .body_img{ 16 position: fixed; 17 right:0px; 18 top:0px; 19 width: 100%; 20 height: 100%; 21 z-index:-9999; 22 background: url(body_bg.jpg) center right no-repeat; 23 } 24 }
可是，再用手機預覽，發現并沒有什么效果，直到添加了一行如下代碼：
1 <meta name="viewport" content="width=device-width" />
再用手機預覽，效果和自己想的就一樣了，也許是因為媒體查詢和viewport配合使用才好吧，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/43656.html
標籤：Html/Css
下一篇：Hugo博客搭建