1
我正在创建我的网站found here，我在页面顶部添加了自己的徽标。 由于本网站是一个手机优化网站，我想添加徽标，以便正确缩放到相应的视口（设备屏幕大小）。使用95％标记无法正常工作的图像
我已经在我的CSS文件中使用此代码来实现这一点：
.logo{
width: 75%;
height: 10%;
}
我的标志存储在header.php，并包含所有相应的页面。但是，该徽标在主页上看起来不错，但是当单击其中一个导航选项卡以调出list.php页面时，它看起来并不正确。
header.php ------------
<html>
<head>
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport" />
<link href="css/style.css" type="text/css" rel="stylesheet" />
<link type="text/css" rel="stylesheet" href="other.css" />
</head>
<body width="100%">
<p align="center"><img src="http://www.xclo.co.uk/logomobi.png" onclick="history.go(-1);" class="logo" border="0" width="100%" />
<div class="ribbon"><div class="ribbon-stitches-top"></div><strong class="ribbon-content"><h1><a href="index.php" style="color:#000000;">Home</a> - <a href="search.php" style="color:#000000;">Search</a> - More</h1></strong><div class="ribbon-stitches-bottom"></div></div></p>
<br /><br /><br /><br />
</p>
</body>
</html>
的CSS是：
body{
background-color:#dff7c8;
}
@font-face {
font-family: 'CustomFont';
src: url('fonts/fh_ink.eot'); /* For Internet Explorer 6+ */
}
@font-face {
font-family: 'CustomFont';
src: url('fonts/fh_ink.ttf'); /* For non-IE browsers */
}
a:link{
color:black;
text-decoration:none;
}
.border {
width: 90%;
height: auto;
Margin-left:auto;
Margin-right:auto;
background-color:#c3f495;
border: 5px ridge #009900;
border-radius: 20px 50px 20px 20px;
box-shadow: 10px 10px 10px rgba(0,0,0,0.55);
}
.title {
font-family: 'CustomFont';
text-align: center;
font-size: 2.5em;
color:#000000;
text-shadow: #999 2px 2px 4px;
}
.content {
font-size: 15px;
color:#000000;
}
.search {
width: 24em;
height:3em;
border: 5px solid #009900;
border-radius: 10px;
position: relative;
box-shadow: 2px 2px 2px 2px #A4A4A4;
font-size: 20px; Position:relative;
}
/* (portrait) ----------- */
@media screen and (orientation:portrait){
.logo{
position:relative;
width: 75%;
height: 10%;
}
.go {
position:relative;
float: right;
margin: 0px 0px 0px;
border: 0px;
background-color: transparent;
}
.inlay{
position:absolute;
top:-15px;
left:-15px
}
.img {
position:relative;
width:201px;
height:81px;
background-color: transparent;
}
.img2 {
position:relative;
border-radius:20%;
width:201px;
height:81px;
background-color: transparent;
}
.img3 {
position:relative;
width:150px;
height:81px;
background-color: transparent;
}
.img4 {
position:relative;
width:201px;
height:150px;
background-color: transparent;
}
.appimg {
position:relative;
width:20%;
height:20%;
background-color: transparent;
}
.drapp {
position:relative;
width:35%;
height:15%;
background-color: transparent;
}
.appstoreimg {
position:relative;
width:110px;
height:40px;
background-color: transparent;
}
.divider {
border-top: 3px dashed #009933;
}
li.android,
li.iphone,
li.ipad{
display:none;
}
body.android .android,
body.iphone .iphone,
body.ipad .ipad{
display:block;
}
}
/*(landscape) ----------- */
@media screen and (orientation:landscape){
.go {
position:relative;
float: right;
height:90px;
width:90px;
margin: 0px 0px 0px;
border: 0px;
background-color: transparent;
}
.inlay{
position:absolute;
top:-15px;
left:-15px
}
.img {
position:relative;
width:211px;
height:81px;
background-color: transparent;
}
.img2 {
position:relative;
width:211px;
height:81px;
background-color: transparent;
}
.img3 {
position:relative;
width:150px;
height:81px;
background-color: transparent;
}
.img4 {
position:relative;
width:211px;
height:160px;
background-color: transparent;
}
.appimg {
width:15%;
height:8%;
background-color: transparent;
}
.drapp {
position:relative;
width:25%;
height:30%;
background-color: transparent;
}
.appstoreimg {
position:relative;
width:220px;
height:80px;
background-color: transparent;
}
.logo{
position:relative;
width: 75%;
height: 10%;
}
.divider {
border-top: 3px dashed #009933;
}
li.android,
li.iphone,
li.ipad{
display:none;
}
body.android .android,
body.iphone .iphone,
body.ipad .ipad{
display:block;
}
}
list.php ------------
<?php
include_once('include/connection.php');
include_once('include/article.php');
$article = new storearticle();
$articles = $article->fetch_all();
?>
<html>
<head>
<title>xclo mobi</title>
<link rel="stylesheet" href="other.css" />
</head>
<body width="100%">
<?php include_once('header.php'); ?>
<div class="container">
<h6><div align="center" class="title" style="color:#618050;"><b><u><?PHP echo "category = ", htmlspecialchars($_GET['id']); ?></b></u></h6></div>
<?php foreach ($articles as $article) {
if ($article['promo_cat'] === $_GET['id']) { ?>
<div class="border">
<a href="single.php?id=<?php echo $article['promo_title']; ?>" style="text-decoration: none">
<img src="<?php echo $article['promo_image']; ?>" border="0" class="img" align="left"><br />
<a href="<?php echo $article['promo_link']; ?>" target="_blank"><img alt="" title="" src="GO.png" height="50" width="50" align="right" /></a>
<br /><br /><br /><br />
<?PHP echo '<div class="title">' . $article['promo_title'] . '</div>'; ?>
<br />
<font class="content"><em><center><?php echo $article['promo_content']; ?></center></em></font>
</div><br/><br />
</a>
<?php } } ?>
</div>
<?php include_once('footer.php'); ?>
</body>
</html>
有人请指导我在正确的方向吗？谢谢。
'不需要CSS？ –
DESKTOP FireFox没有问题。 ;）我错过了“移动”部分！ – AmazingDreams
嗨。 AmazingDreams。你在看哪里？ –
@KevHopwood你使用什么浏览器？什么OS？ – 1234567