无法在打印预览中更改 H1 字体大小



我无法在打印预览中更改H1字体大小。尽管其他每个属性都可以使用,但字体大小不起作用。

body{
	margin: 1%;
	padding:1%;
	background-color: rgba(0,0,255,.2);
	font-size: 100%;
	min-width: 500px;
}
header, footer{
  background-color:#0066FF;
  padding: 1%;
  margin: 1%;
}
header h1{
	font-size: 3rem;
	color:rgba(0,0,0,.7);;
}
section{
  margin:1%;
    padding:1%;
}
nav a{
	display:block;
	background-color: white;
	border: 1px solid black;
	text-align: center;
	border-radius: 35px;
	text-decoration: none;
	padding: 2%;
	margin: 1%;
}
h1{
	text-align: center;
	color:rgba(255,0,0,.7);;
}
.myClass{
	margin: 0em 1em;
	padding:.75em;
	border: 1px solid black;
	border-radius: .25%;
	/* Safari and Chrome */
	-webkit-column-count:3;
	-moz-column-count: 3;
	column-count:3;
}
ol{
	list-style:upper-roman;
	margin:1em;
}
img{
	display: none;
}
footer{
	clear: both;
	text-align:center;
	text-transform: uppercase;
}
@media screen and (min-width: 600px) {
	img{
		display: inline-block;
		width: 20%;
		margin-right: 4%;
	}
	section {
		display: inline-block;
		vertical-align: top;
	}
	#left {
		width: 20%;
	}
	#center {
		width : 70%;
	}
	#center div:last-of-type{
		width: 100%;
		padding:.75em;
		padding-left: 0;
		margin: 0em 1em;
	}
	h2 {
		font-size: 1.7em;
	}
	h1::after {
		content: "(I guess...)";
	}
	h3 {
		height: 35px;
		line-height: 35px;
		font-size: 1.6em;
		font-weight: bolder;
	}
	#center div p {
		height: 45px;
		line-height: 45px;
		font-size: 1.6em;
	}
	header , footer {
		background-color: initial;
	}
	footer {
		width: 70%;
		float: right;
	}
	footer p {
		text-align: left;
	}
}
@media print {
	nav a {
	display:block;
	background-color: white;
	border: 0;
	text-align: center;
	border-radius: 0;
	text-decoration: none;
	padding: 0;
	margin: 0;
	}
		h1 {
		font-style: italic;
		font-weight: bolder;
		font-size: 16px;
	}
}
<!-- 
Create a stylesheet that will style the page 
as it appears in the example. -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Responsive Design Lab</title>
      <link rel="stylesheet" type="text/css" href="responsive.css"/>
<meta charset = "UTF-8">
</head>
<!--  DO NOT CHANGE ANY PART OF THIS HTML CODE!!! -->
<header>
	<h1> Web Design is Awesome!!!</h1>
	<nav>
		<a href="http://www.umich.edu/">University of Michigan</a>
		<a href="http://www.intro-webdesign.com/">Intro to Web Design</a>
	</nav>
  </header>
  <footer>
  	<p>Sample code for Responsive Design .<br/> Colleen van Lent</p>
  </footer>
<!-- DO NOT CHANGE ANY PART OF THIS HTML CODE!!! -->
   
</body>
</html>

尝试使用em,px或一个百分点。

h1 {
font-size: 24px;
font-size: 200%;
font-size: 1.5em;
} 

百分比将取决于默认文本大小是什么。通常默认大小为16px。

我面临着同样的问题。事实证明,对我而言。

尝试将CSS用于打印模式:

@media print{
   h1{....}
}

您可以添加!

相关内容

  • 没有找到相关文章

最新更新