时间戳

首页 > 解决方案 > 如何以特定窗口宽度显示 HTML 元素？

php - 如何以特定窗口宽度显示 HTML 元素？

问题描述

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

我的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;
}

标签： phphtmlcsssassbootstrap-4

解决方案

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

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

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

推荐阅读