我正在使用 HTML 和 CSS 制作一个网站，并且标题在全屏模式下显示良好，但是当我将其设为屏幕尺寸的一半时，标题 (h1) 更改为默认字体并向左对齐而不是居中对齐应该。
这是我的 HTML 代码:
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<title>Home page</title>
<link type="text/css" rel="stylesheet"
href="css/filesheet1.css"/>
</head>
<body>
<nav>
<ul>
<li><a href="index.html">Home page</a></li>
<li><a href="about us.html">About us</a></li>
<li><a href="our songs.html">Our songs</a></li>
<li><a href="see us play.html">See us play</a></li>
<li><a href="Contact us.html">Contact us</a></li>
<li><a href="merchandise.html">Merchandise</a></li>
<li><a href="playing a concert.html">Playing a concert</a></li>
</ul>
</nav>
<h1>Home</h1>
</body>
</html>
这是我的 CSS 代码(对不起，如果有很多，因为我不知道是什么导致了这个问题，我已经把它们都放在那里了):
/* set sizing to border box method */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
/* set maximum and minimum widths for the body and centre within the viewport */
body {
text-align: center;
border: solid;
border-radius: 15px;
border-color: #CACFD2;
box-shadow: 0 0 100px 0 #888888;
background-color: #CACFD2;
font-family: 'Inconsolata', monospace;
margin-left: auto;
margin-right: auto;
max-width: 1024px;
min-width: 256px;
padding-top: 8px;
padding-bottom: 24px;
padding-left: 24px;
padding-right: 24px;
}
html, html body{
height: 100%;
}
html{
background-color: white;
}
/* header */
header{
}
header p {
float: left;
font-size: 16px;
font-weight: bold;
margin-top: 0px;
}
header h1 {
font-size: 16px;
text-align: center;
}
/* the menu */
nav ul {
text-align: center;
list-style-type: none;
background-color: none;
border: none;
font-family: 'Inconsolata', monospace;
font-weight: 400;
padding: 16px;
}
nav ul li {
display: inline;
border-right: 2px solid #111111;
padding-right: 8px;
padding-left: 8px;
}
nav ul li:last-child {
border-right: none;
}
nav ul li a {
text-decoration: none;
color: #111111;
}
nav li.selected{
color: #606060;
}
nav ul li a:hover {
font-weight: 900;
}
/* biographies */
section {
background-color: #FFFFFF;
margin-bottom: 24px;
min-height: 320px;
padding-left: 24px;
padding-right: 24px;
}
/* the aside */
aside {
}
/* footer */
footer {
}
footer p.copyright {
float: left;
margin-top: 0px;
}
footer p.contact {
text-align: right;
}
/* small images are set to 200px in height */
img.small {
float: left;
height: 200px;
margin-bottom: 24px;
margin-right: 24px;
}
/* medium images can be 50% of the container element’s width, up to 360px */
img.medium {
max-width: 360x;
width: 50%;
}
/* large images are 100% of the container element’s width */
img.large {
width: 100%;
}
/* add the same style of border to the elements which are to have borders */
section, img {
border: 2px solid #B1B1B1;
border-radius: 16px;
}
/* the bits that are specific to a wide viewport (over 56em) */
@media{
min-width: 900px
}
article {
float: left;
width: 66%;
}
aside {
float: left;
padding-left: 24px;
width: 34%;
}
footer {
clear: both;
}
h1{
text-align: center;
font-family: 'Inconsolata', monospace;
}
最佳答案
/* Styles go here */
/* set sizing to border box method */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
/* set maximum and minimum widths for the body and centre within the viewport */
body {
text-align: center;
border: solid;
border-radius: 15px;
border-color: #CACFD2;
box-shadow: 0 0 100px 0 #888888;
background-color: #CACFD2;
font-family: 'Inconsolata', monospace;
margin-left: auto;
margin-right: auto;
max-width: 1024px;
min-width: 256px;
padding-top: 8px;
padding-bottom: 24px;
padding-left: 24px;
padding-right: 24px;
}
html, html body{
height: 100%;
}
html{
background-color: white;
}
/* header */
header{
}
header p {
float: left;
font-size: 16px;
font-weight: bold;
margin-top: 0px;
}
header h1 {
font-size: 16px;
text-align: center;
}
/* the menu */
nav ul {
text-align: center;
list-style-type: none;
background-color: none;
border: none;
font-family: 'Inconsolata', monospace;
font-weight: 400;
padding: 16px;
}
nav ul li {
display: inline;
border-right: 2px solid #111111;
padding-right: 8px;
padding-left: 8px;
}
nav ul li:last-child {
border-right: none;
}
nav ul li a {
text-decoration: none;
color: #111111;
}
nav li.selected{
color: #606060;
}
nav ul li a:hover {
font-weight: 900;
}
/* biographies */
section {
background-color: #FFFFFF;
margin-bottom: 24px;
min-height: 320px;
padding-left: 24px;
padding-right: 24px;
}
/* the aside */
aside {
}
/* footer */
footer {
}
footer p.copyright {
float: left;
margin-top: 0px;
}
footer p.contact {
text-align: right;
}
/* small images are set to 200px in height */
img.small {
float: left;
height: 200px;
margin-bottom: 24px;
margin-right: 24px;
}
/* medium images can be 50% of the container element’s width, up to 360px */
img.medium {
max-width: 360px;
width: 50%;
}
/* large images are 100% of the container element’s width */
img.large {
width: 100%;
}
/* add the same style of border to the elements which are to have borders */
section, img {
border: 2px solid #B1B1B1;
border-radius: 16px;
}
/* the bits that are specific to a wide viewport (over 56em) */
@media all and (min-width: 900px) {
}
article {
float: left;
width: 66%;
}
aside {
float: left;
padding-left: 24px;
width: 34%;
}
footer {
clear: both;
}
h1{
text-align: center;
font-family: 'Inconsolata', monospace;
}<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<title>Home page</title>
<link type="text/css" rel="stylesheet"
href="style.css"/>
</head>
<body>
<nav>
<ul>
<li><a href="index.html">Home page</a></li>
<li><a href="about us.html">About us</a></li>
<li><a href="our songs.html">Our songs</a></li>
<li><a href="see us play.html">See us play</a></li>
<li><a href="Contact us.html">Contact us</a></li>
<li><a href="merchandise.html">Merchandise</a></li>
<li><a href="playing a concert.html">Playing a concert</a></li>
</ul>
</nav>
<h1>Home</h1>
</body>
</html>这现在应该适合你了。
关于html - 非全屏时标题会更改字体和位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44396702/