모바일 미디어 쿼리

Question

휴대 기기에서 작동해야하는 website이 있는데 아래 그림과 같이 표시됩니다.

지금까지 나는 다음과 같은 생각을 가지고있다 : CSS의

1. 복사 680 선을 다시 같은 문서 내에서 @media only screen 태그 사이에.
2. 내 적어도 좋아하는 옵션을하지만 난 그냥 옵션이 어떻게 될지 알고 싶어하고 가장 가능성이 높은 mobile.css 스타일 시트에 동일한 코드를 복사 한 후 다시

"2"를 시작?

아이폰보기 :

Answer 1

약간의 작업을하려고하지만 가치가 있어요. 모바일에서 너무 큰 CSS를 가져와 크기에 따라 특정 미디어 쿼리에 넣어야합니다. 의 당신이 당신의 제목은 화면 크기가 작은 600PX보다 때 40px을 80 픽셀로 변경하려면 가정 해 봅시다 :

@media screen and (max-width: 1000px) { 
.mytitle { 
    font-size: 80px; 
    } 
} 
@media screen and (max-width: 600px) { 
.mytitle { 
    font-size: 40px; 
    } 
} 

Answer 2

당신의 HTML

<meta name='viewport' content='width=device-width, initial-scale=1 />