사이트를 휴대 전화 및 iPad 화면의 크기에 맞게 조정하는 방법은 무엇입니까?

Question

새 웹 사이트에서 일하고 있으며 CSS 파일에 너비를 설정했습니다. 휴대 전화 및 다양한 태블릿 장치의 작은 화면에 맞도록 사이트를 적용하고 크기를 조정할 수있는 요구 사항이 있습니다.

내 CSS 스타일에서 사이트가 다른 화면 크기에 가장 잘 적응하도록 설정해야합니까?

Answer 1

미디어 쿼리를 사용하려고합니다. 이는 반응 형 디자인의 전제입니다.

@media only screen and (max-device-width: 480px) { 
    /* write smartphone styles here */ 
} 

@media only screen and (max-device-width: 768px) { 
    /* tablets in portrait mode */ 
} 

@media only screen and (max-device-width: 1024px) { 
    /* tablets in landscape mode and smaller/older monitors */ 
} 

여기를보세요 : 응답 디자인에 http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/