모바일 화면 비교 웹 사이트를 만드는 방법은 무엇입니까?

Question

내 웹 사이트를 모바일 장치로 볼 경우 내 웹 사이트 디자인이 적합하지 않아 머리글 & 바닥 글이 불균형하기 때문에 내 웹 사이트를 모바일로 만들 수 있습니까?

모바일에서 내 웹 사이트의 멋진 변화를 제안하십시오.

Answer 1

당신은 mediaqueries *를 사용할 수 있습니다, 당신은 responsive design에 resarch을 수행해야합니다

는

body{ 
    background-color: red; 
} 

@media screen and (max-width: 800px) { 
    body{ 
     background-color: green; 
    } 

} 
@media screen and (max-width: 500px) { 
    body{ 
     background-color: yellow; 
    } 
} 

위의 코드는 간단한 예입니다. 본체는 기본적으로 빨간색으로 표시되며 장치가 800px보다 작 으면 녹색으로 표시되고 500px보다 작 으면 노란색으로 표시됩니다. 이 작업은 인쇄 전용 또는 min-width:1024px 또는 orientation:landscape 일 수 있습니다. 많은 옵션 :

팁 :
이 끝이 당신에게 많은 시간을 절약 할 수 대신 다른 장치에 대한 폭을 정의하는 경우, 표준 차단 동작을 사용합니다. 이렇게하면 요소를 100 % 빼기/여백/테두리로 사용하는 옵션이 제공됩니다.

#wrapper{ 
    width: auto; 
    display: block; 
    margin: 10px; 
} 

* 제공된 링크에는 iPhone 용 예제 만 제공됩니다. 가능한 한 광범위하게 유지하는 것이 좋습니다. 장기적으로는 더 나아질 것입니다.