在手机中使用绝对位置响应式设计

Question

请考虑此图像。在这里，我有一个背景图像（仅玩家不按钮定时和进度条的外侧部分）。现在，我想将播放，下一个，上一个和停止按钮放置在完全相同位置的地方。

#playbuttonimg{ 
    margin-left:-95px; 
    position: absolute; 
    top:20px; 
} 
#pausebuttonimg{ 
    margin-left:-95px; 
    position: absolute; 
    top:20px; 
    display: none; 
} 
#prevbuttonimg{ 
    position: absolute; 
    /*margin-left:-15px;*/ 
    top:24px; 
} 
#stopbuttonimg{ 
    position: absolute; 
    margin-left:18px; 
    top:24px; 
} 
#nextbuttonimg{ 
    position: absolute; 
    margin-left:50px; 
    top:24px; 
} 

如果我使用这种风格，在桌面浏览器谈到完美，但在移动设备上的利润率左为负使得按钮超出屏幕和积极的利润率将是可见的，但没有相应放置。

而且因为它是移动网站应该在所有的移动设备上正确贴合。我怎样才能做到这一点在CSS？有没有办法做到这一点，而不使用媒体查询？或者是否有其他方式，以便我可以在所有移动设备上正确安装？

Answer 1

如果你用百分比值工作，这应该工作，我的意思是你在使用像素

margin-left:xxxpx; 

，但如果你可以计算出它的百分比值，这可能会解决。

为了计算就可以得到http://resources.sameerast.com/responsive-web-design-formula-easy-calculator.html

Answer 2

帮助您可以将position:relative;添加到您的主父DIV。