0
我無法在打印預覽中更改h1字體大小。雖然所有其他屬性都起作用，但字體大小不起作用。在打印預覽中無法更改h1字體大小
body{
\t margin: 1%;
\t padding:1%;
\t background-color: rgba(0,0,255,.2);
\t font-size: 100%;
\t min-width: 500px;
}
header, footer{
background-color:#0066FF;
padding: 1%;
margin: 1%;
}
header h1{
\t font-size: 3rem;
\t color:rgba(0,0,0,.7);;
}
section{
margin:1%;
padding:1%;
}
nav a{
\t display:block;
\t background-color: white;
\t border: 1px solid black;
\t text-align: center;
\t border-radius: 35px;
\t text-decoration: none;
\t padding: 2%;
\t margin: 1%;
}
h1{
\t text-align: center;
\t color:rgba(255,0,0,.7);;
}
.myClass{
\t margin: 0em 1em;
\t padding:.75em;
\t border: 1px solid black;
\t border-radius: .25%;
\t /* Safari and Chrome */
\t -webkit-column-count:3;
\t -moz-column-count: 3;
\t column-count:3;
}
ol{
\t list-style:upper-roman;
\t margin:1em;
}
img{
\t display: none;
}
footer{
\t clear: both;
\t text-align:center;
\t text-transform: uppercase;
}
@media screen and (min-width: 600px) {
\t img{
\t \t display: inline-block;
\t \t width: 20%;
\t \t margin-right: 4%;
\t }
\t section {
\t \t display: inline-block;
\t \t vertical-align: top;
\t }
\t #left {
\t \t width: 20%;
\t }
\t #center {
\t \t width : 70%;
\t }
\t #center div:last-of-type{
\t \t width: 100%;
\t \t padding:.75em;
\t \t padding-left: 0;
\t \t margin: 0em 1em;
\t }
\t h2 {
\t \t font-size: 1.7em;
\t }
\t h1::after {
\t \t content: "(I guess...)";
\t }
\t h3 {
\t \t height: 35px;
\t \t line-height: 35px;
\t \t font-size: 1.6em;
\t \t font-weight: bolder;
\t }
\t #center div p {
\t \t height: 45px;
\t \t line-height: 45px;
\t \t font-size: 1.6em;
\t }
\t header , footer {
\t \t background-color: initial;
\t }
\t footer {
\t \t width: 70%;
\t \t float: right;
\t }
\t footer p {
\t \t text-align: left;
\t }
}
@media print {
\t nav a {
\t display:block;
\t background-color: white;
\t border: 0;
\t text-align: center;
\t border-radius: 0;
\t text-decoration: none;
\t padding: 0;
\t margin: 0;
\t }
\t \t h1 {
\t \t font-style: italic;
\t \t font-weight: bolder;
\t \t font-size: 16px;
\t }
}<!--
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>
\t <h1> Web Design is Awesome!!!</h1>
\t <nav>
\t \t <a href="http://www.umich.edu/">University of Michigan</a>
\t \t <a href="http://www.intro-webdesign.com/">Intro to Web Design</a>
\t </nav>
</header>
<footer>
\t <p>Sample code for Responsive Design .<br/> Colleen van Lent</p>
</footer>
<!-- DO NOT CHANGE ANY PART OF THIS HTML CODE!!! -->
</body>
</html>
你怎麼知道它是不是工作？打印機通常具有不同的分辨率。首先嚐試將字體大小設置爲35px或50px等可笑的字樣以確保。 –
看起來像一個特殊問題。在你的媒體打印查詢中試試'header h1 {font-size：16px;}' – sol