8

我的网页有一些问题，主要是在移动设备上，但它也影响桌面设备，我愿意奖励赏金（当 stackoverflow 允许我时）给任何可以帮助解决这些问题的人

HTML：http ://pastebin.com/raw.php?i=bbFsMcwT

CSS：http ://pastebin.com/raw.php?i=SGMwt3cs

JSFiddle：http: //jsfiddle.net/D8SJD/

  • 问题 1 - 左/右滚动图像按钮
    • 目前我的左右滚动图像按钮是在 html 中使用的onmouseover，onmouseout我希望能够将它们转换为基于 css 的“按钮”
  • 问题 2 - 动态分辨率
    • 页眉和页脚在不同的分辨率下不是动态的，例如，我创建了在 1680x1050 显示器上设计的页面，它看起来像：桌面 1680x1050但是使窗口变小它看起来像：桌面小窗口
    • 在默认缩放的 Nexus 4 手机上，它看起来像：Mobile Original Zoom
    • 在 Nexus 4 手机上缩小到尽可能远，它看起来像：Mobile Max Distance
    • 在 Nexus 4 上缩小并滚动到底部（以便浏览器的 URL 栏消失），它看起来像：Zoomed out without URL bar （实际网页的页脚消失）
    • 在 Nexus 4 上，缩小并从底部滚动（以便浏览器的 URL 栏可见），它看起来像：Zoomed out with URL bar (footer returns) 。
  • 占位符图像和箭头应该位于页脚和页眉的中心，并且应该根据屏幕分辨率缩小。
  • 移动设备默认缩放（如果可能）需要减少，以便他们可以看到更多，并且如果它接近移动原始缩放，则变得更小（如果可能），那么Up to Top, Down to Key,占位符徽标应该消失......
  • 请看这篇文章底部的图片

对于移动设备，我尝试了以下仅用于测试的操作，但它们都不起作用...

@media (max-width: 640px) {
    #header > a img {
        display: none;
    }
}

编辑 14/11/2013 @ 01:58GMT

在 1920x1080 的屏幕上，它看起来还不错，尽管文本和占位符图像之间存在很大差距，如下所示： http://i.imgur.com/vWoEpK8.png

在 1680x1050 的屏幕上，它大致看起来应该如何记录“Semi”的位置，并与上方的 1920x1080 图像进行比较。 http://i.imgur.com/SEppf7n.png

在 600x600 的屏幕上显示如下，您可以看到占位符和左箭头之间有很大的间隙，但在右箭头上没有间隙，实际上它溢出了，至于文本太远了正确的。 http://i.imgur.com/QcRhW3B.png

4

5 回答 5

6

类型

@media screen and (max-width:640px) {
  /* Your specific styles go here */
}

并且不要忘记添加

<meta name="viewport" content="width=device-width,initial-scale=1.0">

希望有帮助:-)

于 2013-11-14T01:33:39.230 回答
5

我看到您的链接周围有一个边框，请从您的链接中删除：

a{
    border:none ;
}

对于第一个问题，您可以使用 CSS 来完成，只需删除<img>标签内的<a>标签，如下所示：

<div class="footleft">
   <a class="def" href="javascript: void(0);">

   </a>
</div>

创建像这样的图像按钮：

在此处输入图像描述 在此处输入图像描述

然后将背景设置为<a>这样的标签：

#footer .footleft a {
width: 100px;
height: 47px;
display: block;
background: url(path/to/leftarrow.png);
background-position: 0 0;
}

#footer .footright a{
width: 100px;
height: 47px;
display: block;
background: url(path/to/rightarrow.png);
background-position: 0 0;
}

#footer .footleft a:hover , #footer .footright a:hover{
background-position: 0 100%;
}

第二个问题，我想如果你删除position:absolute;它就可以了。#header .headimage#footer .footimage

如果你想居中headmid并且你有两个选择footmid，footmidtwo

首先：为它们设置固定宽度并像这样使用 CSS：

#footer .footmid {
top: 50%;
left: 50%;
position: absolute;
font-size: 15px;
width: 292px;
margin-left: -146px;
}

#footer .footmidtwo {
top: 70%;
left: 50%;
position: absolute;
font-size: 15px;
width: 126px;
margin-left: -63px;
}

#header .headmid {
top: 60%;
left: 50%;
position: absolute;
font-size: 15px;
width: 302px;
margin-left: -151px;
}

第二：如果你需要动态宽度，你可以使用这个 CSS 和 JQuery：

CSS：

#header .headmid {
top: 60%;
left: 50%;
position: absolute;
font-size: 15px;
}

#footer .footmid {
top: 50%;
left: 50%;
position: absolute;
font-size: 15px;
}

#footer .footmidtwo {
top: 70%;
left: 50%;
position: absolute;
font-size: 15px;
}

查询：

var $widthhead = $(".headmid").width();
var $widthfoot = $(".footmid").width();
var $widthfoot2 = $(".footmidtwo").width();

$(".headmid").css("margin-left",$widthhead/2*(-1));
$(".footmid").css("margin-left",$widthfoot/2*(-1));
$(".footmidtwo").css("margin-left",$widthfoot2/2*(-1));

jsFiddle 在这里

于 2013-11-17T11:48:12.700 回答
3

http://jsfiddle.net/D8SJD/4/

除了使用绝对定位，您可以利用文本对齐中心，图像和文本将自动居中。

如果您想从中心偏移，请尝试位置：相对，以及顶部、左侧、右侧等，它将相对于其中心位置移动。

显示的元素：内联；或显示：内联块；将根据父母 text-align 属性对齐，在本例中为 text-align:center。

#footer .footimage {
    display:inline;
    position:relative;
    top:-10px;
}

#footer .footmid {
    top: 50%;
    width:100%;
    position: absolute;
    font-size: 15px;
}

#footer .footmidtwo {
    top: 70%;
    width:100%;
    position: absolute;
    font-size: 15px;
}
于 2013-11-19T01:03:37.230 回答
3

好的，我已尝试过滤掉此解决方案的所有不相关代码。

在此处查看解决方案。

大多数时候，最好使用相对定位来将元素完全放入另一个元素中。在您的情况下，三个不同的字符串适合 300x80 窗口，它有点拥挤。我试图把事情放在一个合乎逻辑的位置来演示。

通过在footimagediv 中放置一个具有相对位置的容器，您可以将 div 中的每个元素放置在footimage绝对相对于footimagediv 的位置，而不是相对于整个页面。

例如，你有什么：

#footer .footmid
{

    position: absolute;
    top: 50%;
    left: 50%;
}

将 class 的 div 放置在footmid距页面顶部 50% 的页面高度和距页面左侧 50% 的页面宽度的位置：

在此处输入图像描述

如果访问您页面的每个用户都具有完全相同的分辨率，这将起作用，但是当不这样做时会导致问题。显然，这不是一个完美的世界，因此不同的分辨率会访问您的页面。

你可以做的是使用相对定位！

基本上我告诉 CSS 不是从窗口的顶部和左侧移动 50%，而是从具有相对定位的最近父元素的顶部和左侧移动 50%：

在此处输入图像描述

您可以修改我的小提琴bottom的、left和right属性，以在与.footmid.footimageContainer.footimage

至于你的箭，我不太确定你想要完成什么；你的问题很模糊，所以当你将鼠标悬停在它们上面时，我只是让它们稍微淡出。任何 mouseover/out 事件都可以使用 CSS 伪元素来处理。

.element //Native and mouseout
{} 

.element:hover //onmouseover
{}

请记住，如果您使用伪元素，则必须指定将在 native 和 :hover 规则中更改的属性。

.element
{color:red;}

.element
{color:black;}

如果您对箭头有任何其他问题，请告诉我，我会修改我的答案。

于 2013-11-20T09:06:03.893 回答
2

根据问题 2，我可能是错的，但是当通过网站结构定位图像时，即

headImg a img{...}

风格行不通。但是，如果您向图像添加类，则样式将起作用；情况可能是有一些未封闭的 div 或元素弄乱了架构。

<div class="headimage">
    <a href="url" target="_blank"><img class="placeholder" src="http://placehold.it/300x80"/></a>
</div>

@media screen and (max-width: 640px) {
    .placeholder {
        display: none;
    }
}

JsFiddle在这里-http: //jsfiddle.net/Q5bEb/

于 2013-11-14T01:24:30.167 回答