Question

经过一次非常谦卑的15小时尝试后，我感到难过。：/我正在做一个免费赠品，因为它看起来像一个简单的对象来测试设备响应网站的理论。不。我有一种感觉，也许我正在过度思考它。这是我努力学习的东西。任何反馈或推动正确的方向将不胜感激。我是HTML5和设备编码的新手。

使用：http://byevan.com/web-template/BuzzApp/ 测试现场：http://justimaginewebdesigns.com/nathalie/mobile/ 图像附加了应该最终看起来像在所有设备上。使用javascript锚定div到底部的链接。

问题：链接的Div容器无法与bg图像协调响应。

使用CSS3作为主要bg图像使响应和@media条目完成工作，尽管由于bg图像本身最好在横向模式下查看。
使用基于％的边距不一致
使用基于％的相对定位不一致
尝试废弃保留文字并仅使用带有热点翻转的图片会在各种设备上失败。
在上述javascript中添加左侧位置属性与设备不一致。
更多实验尝试......

Answer 1

这应该得到你假设你将使用移动优先设计的东西。你可能需要添加另外几个breapoints以在屏幕尺寸增加时使左边距正确。

您还应该从导航项中删除图像宽度和高度，然后使用

img {
width: 100%;
max-width: 100%;
}

然后在容器div上设置图像的宽度。

.homelinks { 
             position:fixed;
             bottom:100px;
             left: 5%;
             -webkit-transition: all 0.3s ease-out; 
             -moz-transition: all 0.3s ease-out; 
             -o-transition: all 0.3s ease-out; 
             transition: all 0.3s ease-out; 
            }

 @media Screen and min-width(700px){
.homelinks { 
             position:fixed;
             bottom:100px;
             left: 26%;
            }}

具有定位链接容器的HTML5响应Bg

1 个答案: