我应该对此page: 做些什么才能在移动设备上正常工作。我尝试过meta视口,但它不起作用。您可以找到页面here:
和html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="english.css">
<link href='http://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<header class="mainHeader">
<ul>
<li><a href="#">Magazine</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Archive</a></li>
<li><a href="#">Books</a></li>
<li><a href="#">Contact</a></li>
</ul>
</header>
<section class="wr">
<img src="images/right.png" class="right">
<img src="images/left.png" class="left">
<section class="wrapper">
<div class="container">
<h1><a href="#" class="name">Photographer</a></h1>
<h1><a href="#" class="title">Story</a></h1>
<p><a href="#" class="lead">DescriptionDescriptionDescription</a></p>
</div>
</section>
</section>
</body>
</html>
和css:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: black;
}
body{
color: rgba( 255, 255, 255, 0.9 );
font-family: Helvetica, sans-serif;
background-image: url("images/14thcover.jpg") ;
background-size: 100%;
background-repeat: no-repeat;
}
a:hover{
color: black;
}
.mainHeader {
float: right;
font-size: 1.3em;
margin-right: 0.8em;
margin-top: 2em;
line-height: 1.2;
}
ul {
list-style-type: none;
}
.mainHeader a{
color: rgba(255,255,255,0.9)
}
.mainHeader a:hover {
color: rgba(255,255,255,0.7)
}
.wr {
width: 75%;
height:60%;
min-height: 65%;
position: absolute;
top:0;
bottom: 0;
right:0;
left:0;
margin: auto;
overflow: auto;
}
.right {
position: absolute;
top: 49%;
right: 0;
}
.left {
position: absolute;
top: 49%;
left: 0;
}
.wrapper {
width: 80%;
height:auto;
background-color: white;
position: absolute;
top:0;
bottom: 0;
right:0;
left:0;
margin: auto;
overflow: auto;
}
.wrapper ul li{
list-style-type: none;
display: inline;
font-size: 2em;
}
.title {
color: red;
}
.name, .lead {
color: black;
}
.lead {
font-size: 1.3em;
}
.container {
width: auto;
top: 35%;
left: 50%;
position: absolute;
overflow: auto;
transform: translate(-50%, -50%);
direction: rtl;
font-weight: 80;
}
.container h1 {
display: inline;
font-weight: 100;
font-size: 2em;
margin-bottom: 1em;
}
.container p {
margin-top: 1em;
text-decoration: none;
}
答案 0 :(得分:2)
这与您在CSS中指定的一样有效。问题是这些特定宽度不适合设备屏幕上的较小分辨率而不重叠。 您必须指定:
@media (max-with: 768px) {
.mainHeader {
float: none;
}
}
您可以缩小尺寸和字体大小,使其外观与更高分辨率相同,但文字无法读取或点击
答案 1 :(得分:0)