- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在创建我的网站 found here , 我在页面顶部添加了我的 Logo 。由于此网站是针对移动设备优化的网站,我想添加 Logo ,以便它可以正确缩放到适当的视口(viewport)(设备屏幕尺寸)。
我通过在我的 CSS 文件中使用这段代码完成了这个:
.logo{
width: 75%;
height: 10%;
}
我的 Logo 存储在 header.php
中,并包含在所有相应的页面中。然而, Logo 在主页上看起来不错,但是当单击其中一个导航选项卡调出 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>
有人可以指导我正确的方向吗?谢谢。
最佳答案
您可以尝试几种方法。
您的初始 Logo 大小为 1,000px × 400px(缩放为 743px × 297px)
我建议将它用于所有 CSS 类 (.logo)
width:100%; max-width:743px; max-height:297px;
我用了一些东西来产生影响,而且效果很好。
您也可以尝试:
<img style="-ms-interpolation-mode: bicubic; width:100%;" border=0 alt="LOGO" align=middle src="your_image.xxx">
这是我在客户网站上使用的另一种方法,它使用 1800 像素宽的图像,可以很好地呈现大小 iPhone 屏幕,并且会自动调整到屏幕宽度,而无需担心高度属性。
关于php - 使用 95% 标签的图像无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18035281/
自从我 faced an issue由于背景图片对于不同分辨率的内容来说太短,我尝试将背景分成 3 部分并自动拉伸(stretch)中间部分以相应地填充顶部和底部图像之间的空间。不幸的是我没能在 CS
我从去年开始就在我的程序中运行这个函数(Linux 和 Windows)。 现在我需要实现一个新功能,我的新构建不再运行。 我还有其他使用 POST 的 CUrl 函数,结果是一样的:没问题,但我的
在评估函数应用方面,Haskell 是只支持普通降阶还是也支持应用降阶?我是否认为正常顺序是 Haskell 惰性的原因? 最佳答案 GHC 运行时不使用术语缩减策略,因为那会非常低效。事实上,GHC
怎么来的multi使用多处理池对多个“进程”上的数据进行分段和处理的函数比仅调用 map 慢(8 秒)。功能(6 秒)? from multiprocessing import Pool import
假设我正在渲染一个 3d GL_TRIANGLE。该对象需要 3 个顶点才能定义:A、B、C。我将此类数据放入缓冲区并通过 glVertexAttribPointer 将其绑定(bind)到着色器。
我有一个字体的三个文件,普通的,粗体的和浅色的。由于 font-weight:light 不存在,我该如何在 font-face 上设置 light 呢? 顺便问一下,font-weight:ligh
我是 C 的新手,我似乎无法弄清楚什么似乎是一个非常简单的指针问题。我的程序将行号添加到文件中。它逐行读入文件,然后在每行的开头添加一个行号。它在每个文件上都可以正常工作,如下所示: soccer@s
我有以下代码,我不确定为什么当它命中 Myclass 的析构函数时我会收到堆损坏检测错误。我相信我正在正确地释放内存?? #include #include using namespace std
有什么方法可以将“正常”数学符号解释为逆波兰符号 (RPN)..? 例如1) 2 + 3*4 - 1 = 234*+1-2) 5 (4-8) = 548- 你可以假设遵循 BODMAS 规则并且必须首
http://www.ergotopia.de/ergonomie-shop/ergonomische-kissen/orthopaedisches-sitzkissen的手机页面应该看起来像右边(检
我正在 Phonegap/Cordova 中构建一个应用程序。应用目前相当简单,但确实需要网络状态和地理定位插件才能工作。 到目前为止,我已经在 Android 上开发了该应用程序(目前它仅由一些基本
我一整天都在做这个,但没有运气 我设法在一行 TfidfVectorizer 中消除了问题 这是我的工作代码 from sklearn.feature_extraction.text import C
也许有人看到一个错误,问题是当我按btn2 (button 2)和btn3 (button 3)应用程序crashes时,但操作仍然有效,即video正在运行并且PDF打开,而button 1正常工作
我正在开发一个应用程序。它的第一页是登录屏幕。成功登录后,我想将用户带到选项卡式 Activity 。我怎样才能在安卓中做到这一点?谢谢 最佳答案 在 Android 中,启动 Activity 是通
我不确定我在这里做错了什么。 :normal! I### 当我对一个单词执行此命令时,我想要的最终结果是: ### word 但是我得到了这个: ###word 最佳答案 Vim 的 :normal是
我必须将 2 个静态矩阵发送到分配动态矩阵的函数,将矩阵 1 乘以矩阵 2,并返回新矩阵的地址。请注意,COMM 很常见。 我尝试删除 free_matrix 行,它工作正常。 void main()
我在我的一个项目中使用 Gnome libglib 并遇到了一个奇怪的错误。我可以输入 GList 的元素数量看起来仅限于 45 个。在第 45 个元素处,它给出了此错误 40 counter 41
我正在尝试获取“顶级”HWND 的尺寸。即,我想要 Firefox/Windows 资源管理器等的主 HWND 的当前尺寸。窗口。如果窗口最小化, GetWindowRect() 将不起作用。 Get
相同的标题:什么是索引 - 正常 - 全文 - 唯一? 最佳答案 普通索引用于通过仅包含行数据的切片或散列来加速操作。 全文索引向数据库的全文搜索 (FTS) 引擎指示它应该将数据存档在给定字段中,以
我正在使用 EnumParser来自 here它在 VC++ 中编译得很好,但是使用 gcc 我有这样的错误: ./Terminator.o: In function `EnumParser::Enu
我是一名优秀的程序员,十分优秀!