Question

我有这个html代码，代表一个小面板，这个面板应该设置为任何类型的屏幕，但它有以下规则：

当分辨率为800x600或更低时，它会在屏幕停止调整（保持800x600）分辨率为4K（4096x2160）或更高，停止调整（保持4096x2160）。

在此版本中，最小分辨率为800x600，最大分辨率为4096x2160。为此我尝试了这段代码：

<div id="topo" style="background:#EEEEEE; border:1px solid #BBBBBB; height:10%; width:100%; border-radius:5px; position: relative; min-width:923px; min-height:88px; max-width:1908px; max-height:110px;">

</div>

<div style="float:left; width:100%; min-width:923px; max-width:1920px; height:90%; max-height:1080px; min-height:720px;">

<div id="Menu_B" style="background:#EEEEEE; text-align:center; border:1px solid #BBBBBB; max-width:764px; max-height:428px; min-height:401px; height:44.1%; width:40%; min-width:370px; border-radius:5px; position: relative; margin-top:5px; float: left; text-align:center; ">

</div>


<div id="Menu_left" style="background:#EEEEEE; text-align:center; border:1px solid #BBBBBB; max-width:1125px; max-height:861px; height:89%; min-height:805px; width:59.2%; border-radius:5px; font-family: 'Droid Sans', sans-serif; position: relative; margin-top:5px; float:right; min-width:547px;">

</div>

<div id="Menu_C" style="background:#EEEEEE; text-align:center; border:1px solid #BBBBBB; max-width:764px; max-height:428px; min-height:401px; height:44.1%; width:40%; min-width:370px; border-radius:5px; position: relative; margin-top:5px; float: left;">
</div>

</div>

你可以在Website中测试它，我认为问题出在最大宽度，最大高度，最小宽度，最小高度，而是以像素模式取而代之百分比，对吧？需要javascript才能做到这一点吗？

如何解决这个设计问题并将这个想法付诸实践？

Answer 1

首先，将内联CSS属性停止为HTML并将其移动到CSS文件。

您可以使用Media queries，它允许您为各种屏幕分辨率设置单独的规则。

因此，您的CSS应如下所示：

＆＃13;

.typo {
  background:#EEEEEE;
  border:1px solid #BBBBBB;
  border-radius:5px;
  height:10%;
  max-height:110px;
  width: 100%;
}

@media only screen and (max-width: 800px)
{
	.typo {
		min-width: 800px;
	}
}

@media only screen and (min-width: 4096px) 
{
	.typo {
		max-width: 4096px;
	}
}

＆＃13;

<div id="topo" class='typo'>Typo text</div>

＆＃13;

尝试在全屏幕中运行此代码;调整浏览器窗口的大小。

Answer 2

您可以将div的尺寸更改为百分比。然后你只需要设置body元素的宽度和高度。您可以使用window.innerWidth来约束其尺寸。

var body= document.querySelector('body');
if(window.innerWidth < 800) {
  body.style.cssText= 'width:800px;height:600px';
}
else if(window.innerWidth > 4096) {
  body.style.cssText= 'width:4096px;height:2160px';
}

最小和最大尺寸百分比

2 个答案:

Fiddle