亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

寬度設置100%在移動端時變成一半

寬度設置100%在移動端時變成一半

maturity_process 2018-05-21 09:23:29
html代碼:<div class="nav-body">????<ul class="nav-img">????????<li>????????????<a href=""><img src="images/ChMkJlrxCxeICdF1AAIP3kkPOFcAAoJhgLLJ_QAAg_2532.jpg" alt="獻禮母親節"></a>????????</li>????</ul>????<div class="nav-warpper">????????<div class="nav-menu">????????????<ul>????????????????<li><a href="">手機</a></li>????????????????<li><a href="">電腦</a></li>????????????????<li><a href="">DIY</a></li>????????????????<li><a href="">數碼</a></li>????????????????<li><a href="">外設</a></li>????????????????<li><a href="">智能</a></li>????????????</ul>????????</div>????</div></div>css代碼:.nav-body{position: relative;overflow: hidden;width:100%;height: 400px;}.nav-img{position: absolute;z-index:-1;}.nav-img a{display: block;width:100%;}.nav-img img{height: 400px;width:100%;min-width: 1920px;}.nav-warpper{width:1200px;margin: 0 auto;}.nav-menu{display: inline-block;width:150px;height: 400px;background: #666;z-index: 2;}.nav-menu li{display: inline-block;width:150px;padding:15px 0;border-top:1px solid #e6e6e6;}.nav-menu li:hover{background: #ec3639;}pc端效果:Iphone6/7/8效果:補充:使用了viewport<meta name="viewport" content="width=device-width, initial-scale=1.0">最后:為什么后出現這種問題,怎么解決?
查看完整描述

4 回答

?
maturity_process

TA貢獻5條經驗 獲得超5個贊

弄了好久才發現是我容納圖片的div出問題

查看完整回答
反對 回復 2018-05-22
?
小草1434

TA貢獻106條經驗 獲得超23個贊

主要就是因為meta標簽的不合理使用

<meta name="viewport" content="width=device-width, initial-scale=1.0">

如果此處刪除該標簽或許就沒有這個問題了

查看完整回答
反對 回復 2018-05-21
?
兼容并包

TA貢獻83條經驗 獲得超67個贊

樓上說的有理?。。?br />

查看完整回答
反對 回復 2018-05-21
?
Gotta

TA貢獻53條經驗 獲得超16個贊

.nav-img img{

? ? height: 400px;

? ? width: 1920px;

}


你這width給人設置了 1920px啊 并不是 100%;


查看完整回答
反對 回復 2018-05-21
  • maturity_process
    maturity_process
    之前嘗試定寬效果沒改過來,我現在的代碼是這樣 .nav-img img{ height: 400px; width:100%; min-width: 1920px; } 但是還是出現一樣的問題
  • Gotta
    Gotta
    width:100%; min-width: 1920px; 會導致img最小寬度為 1920px;
  • 4 回答
  • 1 關注
  • 3225 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號