我的媒體查詢并未應(yīng)用于此，div .col-3盡管它確實(shí)適用于其他媒體查詢。這是選擇器/類的問題嗎？@media screen and (min-width: 600px) and (max-width: 719px) { .col-3 { flex: 0 50%; max-width: 50%; } }<div class="row fade show"> <div class="col-3"> <div class="ProductBox_root__13DPQ"> <div class="ProductBox_photo__Xs8BM"><img src="https://images.pexels.com/photos/245208/pexels-photo-245208.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" alt="Aenean Ru Bristique 1" class="ProductBox_image__1ECK5"> <div class="ProductBox_sale__1WcD7">sale</div> <div class="ProductBox_buttons__uyJNx"><a href="#" class="Button_small__2W39u">Quick View</a><a href="#" class="Button_small__2W39u"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="shopping-basket" class="svg-inline--fa fa-shopping-basket fa-w-18 " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"> <path fill="currentColor" </path> </svg> ADD TO CART</a></div> </div>讓我確認(rèn)一下我添加了<meta name="viewport" content="width=device-width, initial-scale=1.0" />所以一定是別的東西。
4 回答
慕標(biāo)5832272
TA貢獻(xiàn)1966條經(jīng)驗(yàn) 獲得超4個(gè)贊
希望這個(gè)媒體查詢放在你的 CSS 文件的底部。如果不是，則屬性將被覆蓋。請(qǐng)檢查并檢查 css 選項(xiàng)卡中元素的屬性是否被覆蓋
犯罪嫌疑人X
TA貢獻(xiàn)2080條經(jīng)驗(yàn) 獲得超4個(gè)贊
我決定通過向 React 組件添加響應(yīng)類來應(yīng)用 RWD，如下所示：
className='col-12 col-sm-6 col-lg-3'>
這對(duì)我有用，我希望有人會(huì)發(fā)現(xiàn)這很有用。感謝您的所有回答！
浮云間
TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超4個(gè)贊
您還可以通過 Id 定位 div
<div id="custom" class="col-3">
#custom.col-3 {
flex: 0 50%;
max-width: 50%;
border: 2px solid red
}
https://jsfiddle.net/brnt49je/
- 4 回答
- 0 關(guān)注
- 221 瀏覽
添加回答
舉報(bào)
0/150
提交
取消