모바일 환경에서 절대 위치 사용 반응 형 디자인에서

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; 

를 사용하고 있지만, 그 비율 값을 계산 할 수 있다면,이 해결할 수 있습니다 의미, 작동합니다.

계산을 위해 당신은 당신이 당신의 주요 부모 DIV에 position:relative;을 추가 할 수 있습니다 http://resources.sameerast.com/responsive-web-design-formula-easy-calculator.html

Answer 2

의 도움을받을 수 있습니다.