Question

我正在使用SPA，我试图避免将表用于非表格数据。在我的主页面上，我有一组元素，我需要它们并排排列。为此，我使用了课程：

div.nextTo {
    display: inline-block;
    margin-left: 5px;
}

这看起来很好，适用于大屏幕。一旦我调整了浏览器的大小，或者如果我在移动设备上打开我的应用程序，我的元素就会相互叠加。我还为每个元素设置了百分比宽度，似乎并没有根据不同的屏幕大小进行调整。这是一个例子：

＆＃13;

div.pgContainer {
	width: 100%;
	height: 100%;
	font-family: Arial;
	font-size: 12px;
	box-sizing: border-box;
	padding: 5px 10px 5px 10px;
}
div.headerBox {
	width: 100%;
	border-top: 2px solid #000099;
	border-right: 2px solid #000099;
	border-left: 2px solid #000099;
	height: 25px;
	background-color: #000099;
}
div.headerBox span {
	font-weight: bold;
	color: white;
	font-size: 16px;
}
section.mainBox{
	width: 100%;
	padding-top: 0;
	float: left;
	background-color: white;
	border: 2px solid #000099;
}
nav.xNavigation {
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	padding-top: 2px;
	margin-bottom: 5px;
	background-color: #c8e2db;
	float: left;
	border-bottom: 2px solid #000099;
	height: 18px;
}
nav.xNavigation a {
	color: black;
	text-decoration: none;
	cursor: pointer;
	font-weight: bold;
	padding-left: 5px;
	padding-right: 5px;
}
nav.xNavigation a:hover {
	color: #999999;
}
div.nextTo {
	display: inline-block;
	margin-left: 5px;
}

＆＃13;

<div class="pgContainer">
		<div class="headerBox">
			<div style="float:left; margin-left:5px;">
				<span>My App</span>
			</div>
			<div style="float:right; margin-right:5px; margin-top:2px;">
				<span>Choose:
					<select name="hmMenu" id="hmMenu">
						<option value="mainBox" selected="selected">Home</option>
						<option value="settingsBox">Settings</option>
					</select>
				</span>
			</div>
		</div>
		<section class="mainBox">
			<div id="frmContainer">
				<nav class="xNavigation">
					<a href="#" id="chDemo">Demographic</a> |
					<a href="#" id="adInfo">Adult</a> |
				</nav>
				<form name="searchForm" id="searchForm" action="hmHome.cfm" method="POST" onsubmit="return false">
					<div class="nextTo" style="width:5%;">
						<select name="studMenu" id="studMenu">
							<option value="1">Name</option>
							<option value="2">DOB</option>
							<option value="3">Age</option>
							<option value="4">State</option>
						</select>
					</div>
					<div class="nextTo" style="width:10%;">
						<input type="text" name="searchFld" id="searchFld" size="24" maxlength="24" value="" title="Maximum size of the field is 24 characters." placeholder="Example: John, Miller" />
					</div>
					<div class="nextTo" style="width:5%;">
						<input type="button" name="searchBtn" id="searchBtn" value="Search"/>
					</div>
					<div class="nextTo" style="width:30%;">
						<span id="searchMsg" style="display:none;"></span>
					</div>
				</form>
			</div>
		</section>
</div>

＆＃13;

我想知道在不同屏幕尺寸下调整容器的最佳方法是什么？还有什么我应该用它来为所有浏览器工作？如果有人知道如何实现这一点，请告诉我。谢谢！

Answer 1

您可以使用@media css规则并根据视口大小定义不同的样式属性。请参阅此reference。可以验证@media浏览器兼容性here。

Answer 2

您可以使用width等响应式单位声明vw。

1vw是视口宽度的1％。

因此，如果您希望五个元素跨越视口的宽度，您可以将元素设置为如下样式：

div {
    width: 18vw;
    margin: 1vw;
}

如何调整不同屏幕尺寸的div元素宽度？

2 个答案: