根据显示器分辨率自动调整内容大小以适应屏幕

时间：2017-04-30 01:36:45

标签： html css twitter-bootstrap

所以我使用bootstrap 4和一些卡片，我遇到了一个问题。

我制作了一个在1920x1080分辨率下看起来非常精细的页面，但是当我使用2560x1440分辨率的朋友加载相同的页面时，它看起来有点不同。

screen test

左边是1920x1080，右边是2560x1440。如您所见，2560x1440分辨率底部有很大的空间差距。它应该看起来与左侧的图像完全相同，但会自动调整大小以适合页面。

body {
  background-color: #5C67B6;
}

html {
  height: 100%;
  width: 100%
}

#footer {
  text-align: center;
  position: fixed;
  height: 50px;
  background: transparent;
  bottom: 0px;
  left: 0px;
  right: 0px;
  margin-bottom: 0px;
}

#clearfooter {
  height: 50px;
}

.card {
  margin: 0 auto;
  /* Added */
  float: none;
  /* Added */
  margin-bottom: 10px;
  /* Added */
}

.container {
  max-height: 1280px;
  max-width: 720px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<h2 style="text-align: center; color:#fff;"><strong>Premium Offers</strong></h2>
<h4 style="text-align: center; color:#fff;">Choose your Plan</h4>
<div class="container">
  <div class="card-deck">
    <div class="card" style="width: 20rem;">
      <div class="card-block">
        <h3 class="card-title">Turbo</h3>
        <p class="card-text">If Turbo isn't enough for you, <br> you can upgrade to Turbo Plus.<br>
          <br>If you want to <strong>ALWAYS</strong> be ahead of competing servers, this is for you.</p>
      </div>
      <div class="card-inverse" style="width: 20rem; border-color: #fff;">
        <ul class="list-group list-group-flush list-group">
          <li class="list-group-item">Highlighted Server!</li>
          <li class="list-group-item">Always visible!</li>
          <li class="list-group-item">Special Support</li>
          <li class="list-group-item">Turbo Plus role on our server</li>
          <li class="list-group-item">Turbo Plus Badge</li>
          <a href="#" class="list-group-item active" style="text-align: center;">Buy Turbo Plus</a>
        </ul>
      </div>
    </div>
    <div class="card card-inverse" style="background-color: #333; border-color: #333; width: 20rem;">
      <div class="card-block">
        <h3 class="card-title">Turbo Plus</h3>
        <p class="card-text">If Turbo isn't enough for you, <br> you can upgrade to Turbo Plus.<br>
          <br>If you want to <strong>ALWAYS</strong> be ahead of competing servers, this is for you.</p>
      </div>
      <div class="card-inverse" style="width: 20rem; border-color: #333;">
        <ul class="list-group list-group-flush list-group">
          <li class="list-group-item">Highlighted Server!</li>
          <li class="list-group-item">Always visible!</li>
          <li class="list-group-item">Special Support</li>
          <li class="list-group-item">Turbo Plus role on our server</li>
          <li class="list-group-item">Turbo Plus Badge</li>
          <a href="#" class="list-group-item active" style="text-align: center;">Buy Turbo Plus</a>
        </ul>
      </div>
    </div>
  </div>
</div>

我尝试过寻找类似问题的答案，但没有用。希望得到一些帮助。已经工作了7-9个小时。

1 个答案:

答案 0 :(得分：2)

我认为处理此问题的最佳方法是使用VW和VH属性，或将每个height参数转换为百分比，以便在更改窗口比例时调整所有内容（甚至是字体）。如果你继续按百分比添加均匀高度，那么一定要确保身体和所有底层儿童都设置了特定的高度。

例如，设置高度百分比的所有内容将导致以下结果：https://jsfiddle.net/y1kbz5r0/2/（进一步编辑高度和不需要的内容）。

或者，您也可以使用媒体查询来放大某些尺寸高于1080px的所有尺寸，例如：

@media screen and (min-height:1080px){
    //CSS code here
}

编辑：可以在此处看到对MediaQuery的进一步更改以及VH的使用：https://jsfiddle.net/y1kbz5r0/4/

我希望这会为您提供足够的信息来继续这一点。如果没有随时可以要求提供更多信息。

编辑：根据您的要求制作出版本：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<style type="text/css">
html,body{
	height:100%;
	width:100%
}
body{
	background-color:#5C67B6;
	margin:auto;
	position:relative;
	padding-top:10%;
}
header{
	margin:auto;
	padding:2vh 0;
	text-align:center;
	color:#fff;
}
.container{
	margin:auto;
	height:70%;
}
.card-deck{
	margin:auto;
}
.card{
	margin:1rem;
	min-width:20rem!important;
	width:30vw;
	font-size:1.2em
}
.card-inverse{
	background-color:#333; 
	border-color:#333;
}
.buybutton{text-align:center!important}
@media screen and (min-height:1000px){
	body{
		font-size:1.7vh
	}
	h2{font-size:3vh}
	h3{font-size:2.6vh}
	h4{font-size:2.2vh}
	.card,.card-inverse{
		width:33vw!important;
	}
	.container{
		display:flex;
		height:auto;
		width:100%;
		margin:auto;
		align-items:center;
		justify-content:center;
	}
	.card-block{
		padding:1.6vh;
	}
	.card-deck{
		border-spacing:1.75vh 0;
	}
	.list-group-item{
		padding:1vh 1.65vh;
	}
}
</style>
</head>
<body>
	<header>
		<h2>Premium Offers</h2>
		<h4>Choose your Plan</h4>
	</header>
<!--Container-->
	<div class="container">
		<div class="card-deck">
			<!--Card One-->
			<div class="card">
				<div class="card-block">
					<h3 class="card-title">Turbo</h3>
					<p class="card-text">If Turbo isn't enough for you,
						<br> you can upgrade to Turbo Plus.
						<br>
						<br>If you want to <strong>ALWAYS</strong> be ahead of competing servers, this is for you.</p>
				</div>
				<div class="card-inverse">
					<ul class="list-group list-group-flush">
						<li class="list-group-item">Highlighted Server!</li>
						<li class="list-group-item">Always visible!</li>
						<li class="list-group-item">Special Support</li>
						<li class="list-group-item">Turbo Plus role on our server</li>
						<li class="list-group-item">Turbo Plus Badge</li>
						<a href="#" class="list-group-item active buybutton">Buy Turbo Plus</a>
					</ul>
				</div>
			</div>
			<!--Card Two-->
			<div class="card card-inverse">
				<div class="card-block">
					<h3 class="card-title">Turbo Plus</h3>
					<p class="card-text">If Turbo isn't enough for you,
						<br> you can upgrade to Turbo Plus.
						<br>
						<br>If you want to <strong>ALWAYS</strong> be ahead of competing servers, this is for you.</p>
				</div>
				<div class="card-inverse">
					<ul class="list-group list-group-flush">
						<li class="list-group-item">Highlighted Server!</li>
						<li class="list-group-item">Always visible!</li>
						<li class="list-group-item">Special Support</li>
						<li class="list-group-item">Turbo Plus role on our server</li>
						<li class="list-group-item">Turbo Plus Badge</li>
						<a href="#" class="list-group-item active buybutton">Buy Turbo Plus</a>
					</ul>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

填充和边距调整可能需要根据您的喜好进一步更改，但我确实认为使用此代码，您的问题已经得到了很好的回答。

相关问题
最新问题