2017-08-08 144 views
1

我想隱藏小寬度設備的右邊框。隱藏移動設備的邊框

請檢查片段。

@media screen and (max-width: 480px) { 
 
    #d { 
 
    border-right: none; 
 
    } 
 
}
<div style="text-align:center; border-right:solid #8d989a 1px;height:230px;" id="d"> 
 
    <img src="vector-smart-object1.png"> 
 
</div>

回答

0

@media screen and (max-width: 480px) { 
 
    #d { 
 
    border-right: none; 
 
    } 
 
}
<div style="text-align:center; border-right: 1px solid #8d989a;height:230px;" id="d"> 
 
    <img src="https://www.w3schools.com/css/paris.jpg"> 
 
</div>

的變化: 右邊框:固體#8d989a 1px的; ====> border-right:1px solid#8d989a; 在編輯您的問題之前,id關鍵字之前添加了空格。

0

首先你的border-right屬性的語法是錯誤的。 您應該像這樣更改它:border-right : 1px solid #8d989a;,因爲目前即使屏幕較大也不會顯示邊框。

請謹慎使用CSS中的參數順序。

+0

我會感謝你的 – Batoul

0

我與它合作了一下,想通了它只需要@media屏幕。

@media only screen and (min-width: 480px) { 
 
    #d { 
 
    border-right: 1px solid #8d989a; 
 
    } 
 
}
<div style="text-align:center;height:230px;" id="d"> 
 
    <img src="vector-smart-object1.png"> 
 
</div>

這裏是示出該工作的代碼筆。

https://codepen.io/anon/pen/ayWVQG

乾杯

+0

它不工作 – Batoul

+0

你想查看它在什麼設備? –

+0

我只想隱藏小寬度屏幕的邊框 – Batoul

0

可以使用http://mobiledetect.net檢測移動設備。並改變border-right:solid #8d989a 1px;border-right:1px solid #8d989a;

 <div style="text-align:center;<?php if (!$detect->isMobile()) {echo'border-right:1px solid #8d989a;';}?> height:230px;"id="d"> 
    <img src="vector-smart-object1.png" >  
</div>