0

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

使用：http ://byevan.com/web-template/BuzzApp/ 测试站点： http: //justimaginewebdesigns.com/nathalie/mobile/附上它在所有设备上最终应该 是什么样子的图像。使用 javascript 将 div 锚定到底部的链接。

问题：链接的 Div 容器与 bg 图像的响应不一致。

  • 对主背景图像使用 CSS3 可以使其具有响应性，并且 @media 条目可以完成他们的工作，尽管由于背景图像本身，它最好在横向模式下查看。
  • 使用基于百分比的边距不一致
  • 使用基于 % 的相对定位不一致
  • 尝试放弃保留文本并仅使用带有热点翻转的图像在设备上惨遭失败。
  • 向上面提到的 javascript 添加左位置属性在设备之间是不一致的。
  • 更多的实验尝试......
4

1 回答 1

0

假设您将使用移动优先设计，这应该得到您所追求的。随着屏幕尺寸的增加，您可能需要再添加几个断点以使左边距正确。

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

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%;
            }}
于 2012-08-21T03:00:37.247 回答