Question

我想隐藏小宽度设备的右边框。

请检查代码段。

＆＃13;

@media screen and (max-width: 480px) {
  #d {
    border-right: none;
  }
}

＆＃13;

<div style="text-align:center; border-right:solid #8d989a 1px;height:230px;" id="d">
  <img src="vector-smart-object1.png">
</div>

＆＃13;

Answer 1

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

的变化： border-right：solid＃8d989a 1px; ====＆GT; border-right：1px solid＃8d989a; 在编辑问题之前，在id关键字之前添加了空格。

Answer 2

首先，border-right属性的语法是错误的。您应该像这样更改它：border-right : 1px solid #8d989a;，因为目前即使屏幕较大，它也不会显示边框。

小心CSS中的参数顺序。

Answer 3

我曾经使用它并想出它需要@media only屏幕。

@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

干杯

Answer 4

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

隐藏移动设备的边框

4 个答案: