이미지를 올바르게 배치하고 모든 HTML/CSS를 모든 해상도에 맞 춥니 다.

Question

저는이 모든 일에 총 초보자입니다. 학교에서 제품 홍보 프로젝트를 작성하도록 배정 받았습니다. 나는 집에서 일 했으므로 큰 모니터가있는 학교에 업로드했을 때 모든 것을 다르게 볼 수 있다는 것을 낙담했습니다. 나는 누군가가 나에게이 문제를 해결하는 데 도움을 줄 수 있습니다 How I coded in HTML[][1]]1How I coded in CSS

처럼 보이기 위해 웹 사이트를 구성하는 방법 [?

Answer 1

응답 성을 높이려면 절대 위치 지정을 사용할 수 없습니다.생각해 보면, px로 절대적으로 어떤 것을 배치하면 모니터에 관계없이 그대로있을 것입니다. 시피

적색 사각형 절대 위치 지정된 요소이다

는 I는 예로서 시각이 사진을 만들었다. 수는이 클래스를 가지고있다 말 : 위의 이미지에서 보는 바와 같이, 태블릿의 뷰포트에서 렌더링

.square { 
    background-color: red; 
    height: 100px; 
    width: 100px; 

    position: absolute; 
    top: 400px; 
    right: 1255px; 
} 

Absolute lengths example as a codepen

있지만 전화.

왜인가요?

논리적으로 태블릿에는 전화보다 데이터를 표시하는 데 더 많은 픽셀이 있습니다. 더 간단 할 수 없습니다.

어떻게 대응할 수 있습니까? (다른 장치에서도 동일하게 표시)

픽셀 대신 뷰포트를 기준으로 한 meazurement를 사용해야합니다. AKA Relative Lengths.

는 위의 문제

.square { 
    background-color: red; 
    height: 100px; 
    width: 100px; 

    position: absolute; 
    top: 400px; 
    right: 66%; 
} 

relative lengths example as a codepen 그래 .. 그게 더하거나 덜의를 해결 할 수 있습니다. 브라우저 창을 작게 만들고 마술을 보면서 두 코덱을 비교할 수 있습니다.