由于css不正确,网页在不同分辨率上显示不正确

Question

我的网页存在一些问题,主要是在移动设备上,但它也会影响桌面设备,我愿意奖励一个赏金(当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手机上,它看起来像:移动原始缩放
  • 在Nexus 4手机上,它尽可能地缩小,看起来像:移动最大距离
  • 在Nexus 4缩小并滚动到底部(以便浏览器URL栏消失)它看起来像:缩小没有URL栏 (实际网页的页脚消失)
  • 在Nexus 4上缩小并从底部滚动(以便浏览器URL栏可见),它看起来像:用URL栏缩小 (页脚返回) .
• 占位符图像和箭头应该位于页脚和标题的中心,并应根据屏幕分辨率缩小.
• 移动设备默认缩放(如果可能的话)需要减小,使他们可以看到更多的和越来越小(如果可能),如果它得到接近移动原稿倍率那么Up to Top,Down to Key,占位符标识应消失......
• 请参阅本文底部的图片

对于移动设备,我尝试了下面的内容,仅用于测试,但没有一个工作......

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

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

在1920x1080的屏幕上看起来没什么问题,尽管文本和占位符图像之间存在很大差距,如下所示:

在1680x1050的屏幕上,它大致看起来应该注意"半"的位置,并与上面的1920x1080图像进行比较.

在一个600x600的屏幕上,它显示如下,你可以看到占位符和左箭头之间有一个很大的差距,但是在右箭头上没有间隙,实际上它溢出了,因为文本也太过分了正确的.

Answer 1

类型

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

并且别忘了添加

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

希望有所帮助:-)

Answer 2

我看到您的链接周围的边框,从您的链接中删除:

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它会没事的.

如果您想centerize 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;
}

JQuery的:

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就在这里

Answer 3

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

请参阅此处的解决方案。

大多数时候，最好使用相对定位将元素绝对放置在另一个元素内部。就您而言，在 300x80 的窗口中容纳三个不同的字符串，这有点拥挤。我试图将事物放在一个合乎逻辑的位置来进行演示。

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

例如，您拥有的：

#footer .footmid
{

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

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

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

你能做的就是使用相对定位！

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

您可以修改my fiddlebottom的、left和right属性，以在与 相同大小且位置相同的相对元素内移动元素。footmid.footimageContainer.footimage

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

.element //Native and mouseout
{} 

.element:hover //onmouseover
{}

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

.element
{color:red;}

.element
{color:black;}

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