如何以特定窗口宽度显示 HTML 元素？答案

【问题标题】：How to show HTML elements at specific window widths?如何以特定窗口宽度显示 HTML 元素？
【发布时间】：2018-12-25 09:03:01
【问题描述】：

我想找到一种方法使六边形成为所有窗口宽度的文本的美观容器。在这一点上，它只在几个窗口宽度上看起来还不错。我想这样做，以便我可以拥有仅以良好宽度显示的代码，然后在屏幕宽度更改为新范围时将其自身隐藏，以便一段看起来不错的新代码可以取代它。我该怎么做？

我的 php 代码：

<!DOCTYPE html>
<html>
        <head>
                <link rel = "stylesheet" type = "text/css"href="css/styleshexagon.css">
                <!-- Latest compiled and minified CSS -->
                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
                <!-- jQuery library -->
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
                <!-- Latest compiled JavaScript -->
                <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        </head>
        <body>
                <?php
                        //for Medium screen width
                        print"<div class = \" d-none d-md-block d-lg-none\"\>\n";
                        $numHexes=3;
                        for($i = 0;$i<$numHexes;$i++)
                        {
                                print"<div class=\"hexagon  \">\n";
                                print"  <span class=\"text\">XYZ</span>\n";
                                print"  </div>\n";
                        }
                        for($i = 0;$i<$numHexes;$i++)
                        {
                                print"<div class=\"hexagon \" style = \"
                                        margin-left:auto ;
                                        margin-bottom: auto;
                                        \">\n";
                                print"  <span class=\"text\">XYZ</span>\n";
                                print"</div>\n";
                        }
                        print"</div>\n";
                        //for Small screen width
                        /*Code for that goes here*/
                ?>
        </body>
</html>

我的 SASS 代码：

$hex-size: 300px;
$hex-height: $hex-size / sqrt(3);
$hex-color: #C6538C;


.hexagon {
  position: relative;
  display:inline-block;
  width: $hex-size;
  height: $hex-height;
  background-color: $hex-color;
  margin: $hex-height/2;
  margin-left:auto;
  margin-bottom:auto;
  left:-10px;

}

.hexagon .text {
  position: absolute;
  top: -80px;
  left: 0;
  font: 12px sans-serif;
  color: #ff00ff;
  width: $hex-size;
  height: $hex-height;
  text-align: center;
  overflow: hidden;
  line-height: $hex-height;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: $hex-size/2 solid transparent;
  border-right: $hex-size/2 solid transparent;
}

.hexagon:before {
  bottom: 100%;
  border-bottom: $hex-height/2 solid $hex-color;
}

.hexagon:after {
  top: 100%;
  left: 0;
  width: 0;
  border-top: $hex-height/2 solid $hex-color;
}

【问题讨论】：

你使用过媒体查询吗？
使用d-noned-sm-blockd-md-blockd-lg-blockd-xl-block根据您的要求，无需编写自定义媒体查询。

标签： php html css sass bootstrap-4

【解决方案1】：

您似乎在这里要求一些不同的东西。在某些屏幕尺寸下仅显示某些元素，并格式化元素，使其适用于大多数（如果不是所有）屏幕尺寸。

@media (max-width: 700px) {
.mydiv {
width: 100%; /* adds full width to mydiv which is best for mobiles */
display: block; /* displays mydiv as a block */
}
.mydiv-2 {
display: none; /* Doesn’t display mydiv-2 at screen sizes upto 700px  */
}
}

请注意，您可以同时使用max-width 和min-width

希望这会有所帮助！

【讨论】：

非常感谢您的帮助！因此，在我的实现中，我将拥有多个具有不同窗口大小的最大和最小宽度的@media 结构，并且在这些结构中我可以指定它们的外观？更具体地说，当我调整浏览器窗口的大小时，它允许我隐藏和显示不同的东西是否正确？
我做了一些实验，发现这是正确的解决方案！谢谢！
是的，这是正确的。您可以为特定尺寸的设备提供任意数量的媒体结构，但如果您尝试在您的媒体尺寸中坚持使用宽度：100%，那么您应该只需要一个来让我们说“手机”作为一个整体，而不是为 iPhone 5 创建一个，为 iPhone 6 创建一个，为三星 Galaxy A5 等创建一个。

【解决方案2】：

一种可能的解决方案是使用@media CSS rule，它可以根据不同的显示媒体应用不同的样式。在您的情况下，要根据屏幕尺寸进行自定义，您可以使用 min-width 和 max-width 属性。

如果屏幕宽度小于 200 像素，此示例将隐藏 someElement。

@media min-width: 200px {
    someElement {
        display: none
    }
}

【讨论】：