CSS는 다른 해상도 개발하는 동안

Question

에 엉망, 나는 다음과 같은 CSS 속성

을 선언 말할 수

.buttons-pos { 
    /*margin: 0px 20px;*/ 
    padding: 10px; 
    display:inline-block; 
    overflow:hidden; 
    height:20px; 
    position: relative; 
    right:-550px; 
    background-color: #E6E6E6; 
    position: relative; 
    text-align: justify; 
    border: 1px solid; 
    border-color: #E6E6E6; 
    border-radius: 3px; 

} 

두 개의 파란색 버튼에 CSS : 이것은 내 컴퓨터에 있지만 때 완벽하게 정상적으로 보이는

.checksheet { 
    /*margin: 0px 20px;*/ 
    left: 400px; 
    top: 45px; 
    position: relative; 

} 
    .nchecksheet { 
    /*margin: 0px 20px;*/ 
    left: 680px; 
    top:2px; 
    position: relative; 

} 

다른 컴퓨터에서 확인해. 위치가 엉망이야?

이 문제를 해결하는 방법은 무엇입니까?

첨부 된 스크린 샷. ... 지금은 ...

당신이 볼 수있는 파란색 버튼 ...입니다 내 노트북에서 화면의 중앙에 ..

그러나 여기를 회색 막대를 무시 .. 그것을 왼쪽으로 이동했다 . 내 노트북이를 보면

.. 파란색 버튼을 내 화면 의 중심에있을 것입니다하지만 회색 막대가 오른쪽으로 이동됩니다 ..

Answer 1

나는 당신의 코드를 가지 않았다 그러나 픽셀 단위로 위치와 크기를 하드 코딩해야하므로 문제는 거의 확실합니다. 더 높은 해상도의 장치를 디자인하고 나중에 더 낮은 해상도의 장치를 확인하면 레이아웃이 엉망입니다.

유동적이기를 원하면 페이지 레이아웃에 percentages을 사용해야합니다.

귀하의 필요에 더 잘 맞을 수있는 또 다른 솔루션은 가장 낮은 공통 분모를 설계하는 것입니다. 이것은 본질적으로이 경우 페이지가 표시 될 가장 낮은 해상도가 무엇인지 결정한 다음 해당 해상도로 디자인하고 페이지를 다른 해상도로 맞추는 것을 의미합니다.