隱藏移動設備的邊框

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

請檢查片段。

@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>

來源

2017-08-08 Batoul

@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關鍵字之前添加了空格。

來源

2017-08-08 14:02:39 anu

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

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

來源

2017-08-08 14:03:25

我會感謝你的 – Batoul

我與它合作了一下，想通了它只需要@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

乾杯

來源

2017-08-08 14:04:46

它不工作 – Batoul

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

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

可以使用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>

來源

2017-08-08 14:05:44

隱藏移動設備的邊框

回答

相關問題