html显示宽度,如何以特定的窗口宽度显示HTML元素?

在这个项目中,我想找到一种方法,使六边形成为一个在所有窗口宽度的文本的好看的容器。在这一点上,它只在一些窗口宽度看起来是好的。我想这样做,我可以让代码只显示在良好的宽度,然后隐藏自己当屏幕宽度变化到一个新的范围,这样一个新的代码,确实看起来不错,可以取代它。我该怎么做?谢谢你的好意!

我的PHP代码:

//for Medium screen width

print"

\n";

$numHexes=3;

for($i = 0;$i

{

print"

\n";

print" XYZ\n";

print"

\n";

}

for($i = 0;$i

{

print"

margin-left:auto ;

margin-bottom: auto;

\">\n";

print" XYZ\n";

print"

\n";

}

print"

\n";

//for Small screen width

/*Code for that goes here*/

?>

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

}