时间戳

首页 > 解决方案 > 无论屏幕大小如何，如何创建从屏幕最左端到右端的标题样式？

html - 无论屏幕大小如何，如何创建从屏幕最左端到右端的标题样式？

问题描述

我想将这个蓝条从屏幕的一端拉伸到另一端。现在它正在拉伸 980px。根据屏幕尺寸，它应该从一端跨越到另一端。

如果我增加 980px，对齐方式会改变。如何使栏响应？

我应该使用什么 CSS？

蓝条不长

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

body {
  height: 980px;
  width: 100%;
  margin: 0;
  padding: 0;
}

header {
  width: 980px;
  height: 40px;
  margin: 0 0 10px 0;
  padding: 0;
  background: #0B61A5;
  color: white;
}

navigation {
  width: 980px;
  margin: 0;
  padding: 0;
  text-align: center;
}

navigation ul {
  width: 980px;
  list-style: none;
  padding: 0;
  margin: 0;
}

navigation ul li {
  display: inline;
  margin-right: 1em;
}

footer {
  width: 940px;
  height: 20px;
  margin: 0 0 10px 0;
  padding: 10px 20px;
  background: #0B61A5;
  color: white;
}
  
<html>
	<body>
	    
		<header>
			<h1>OEMS User Area</h1>
		</header>
		
		<navigation>
			<ul>
				<li>User: </li>
				<li> <a href="">Home</a> </li>
				<li> <a href="">Logout</a> </li>
			</ul>
		</navigation>
		
		<footer> O.E.M.S </footer>
		
	</body>
</html>

标签： htmlcssresponsive-designresponsivestylesheet

解决方案

您应该使用 width:100% 将标题拉伸到任何设备尺寸的全宽。如果您想要针对不同设备尺寸的其他设计，请使用媒体查询。在https://www.w3schools.com/css/css_rwd_mediaqueries.asp了解有关响应式设计的更多信息

body {
 height: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
}

header {
 width: 100%;
 height: 40px;
 margin: 0 0 10px 0;
 padding: 0;
 background: #0B61A5;
 color: white;
}

推荐阅读