Question

我正在使用fowlling CSS显示社交分享按钮：

#social_side_links {
    position: fixed;
  top: 40%;
  right: 0;
  padding: 0;
  list-style: none;
  z-index: 99;
}
#social_side_links li a {display: block;}
#social_side_links li a img {
    display: block;
    max-width:25px;
  padding: 10px;
  -webkit-transition:  background .2s ease-in-out;
  -moz-transition:  background .2s ease-in-out;
  -o-transition:  background .2s ease-in-out;
  transition:  background .2s ease-in-out;
}
#social_side_links li a:hover img {background: rgba(0, 0, 0, .2);}

但是，我想在移动设备（而不是平板电脑）中隐藏它。这项工作的方法是什么？

Answer 1

您可以使用媒体查询隐藏响应中的元素。

在您的情况下，您可以使用：

@media screen and (max-width:768px){
#social_side_links {
    display:none;
}

这会在移动设备上隐藏您的元素（根据您的需要更改最大宽度）。

Answer 2

Media queries是解决方案。允许您指定特定分辨率，屏幕格式等的样式。

Fox示例：

<form action="inscription_smmar2.php" method="post" class="form-horizontal" role="form">
                <div class="form-group">
                    <label for="nom" class="col-sm-2 control-label">Nom&Prénom</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="nom" name="nom" placeholder="Nom&Prénom">
                    </div>
                </div>
                <div class="form-group">
                    <label for="labo" class="col-sm-2 control-label">Laboratoire</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="labo" name="labo" placeholder="Nom du Laboratoire">
                    </div>
                </div>
                <div class="form-group">
                    <label for="email" class="col-sm-2 control-label">Mail</label>
                    <div class="col-sm-10">
                        <input type="mail" class="form-control" id="email" name="email" placeholder="mail">
                    </div>
                </div>
                <div class="form-group">
                    <label for="pass" class="col-sm-2 control-label">Mot de Passe</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" id="pass" name="pass">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                    <button name="submit_m" type="submit" class="btn btn-primary">  <b>Valider</b> </button>
                    </div>
                </div>
            </form>

如果您必须支持移动设备，并且它们也是优先考虑事项，我建议您遵循Mobile First方法，例如示例。

Answer 3

定位移动设备的典型方法是使用@media查询：

@media (max-width: 480px) {
  #social_side_links {
    display: none;
  }
}

您还可以使用@media查询根据其他更具体的信息应用CSS，例如：

@media screen and (max-device-width: 480px) and (orientation: portrait) {
    ...
}

@media查询的官方当前文档：

CSS Conditional Rules Module Level 3。

有用的链接：

Using media queries（MDN）
Media queries（MDN）

如果上述内容不够，您需要更准确的设备定位，您可能需要查看以下某个库：

移动设备上的CSS /隐藏按钮

3 个答案: