적응형 키 해상도를 달성하기 위해 @media에서 몇 가지 미디어 쿼리를 공유하세요.

시대가 발전하면서 모바일 기기가 많아지면서 프론트엔드 엔지니어들은 한 페이지에 두 세트의 코드를 작성해야 했습니다. 하나는 PC용이고 다른 하나는 모바일용이었습니다. 미디어 쿼리, 즉 @media 메소드를 사용할 수 있기 때문에 코드만 있으면 충분합니다. 다음으로, 자가 적응이 필요한 친구들이 참고할 수 있는 미디어 쿼리 @media에 대한 몇 가지 핵심 해결 방법을 소개하겠습니다. 해상도나 창 크기가 다른 기기에서 레이아웃이 잘못 정렬되어 두통을 겪는 경우가 많습니다. @media screen을 사용하여 적응형 웹 레이아웃을 얻을 수 있지만 모든 주류 기기와 호환되는 방법이 문제가 됩니다. 설정시 해상도는 어떻게 되나요?

1. 먼저 부트스트랩에서 탐색되는 다음 코드를 살펴보세요. 최소 너비는

768, 992, 1200입니다. 물론 과거에는 가로폭이 600~480인 기기도 있었고, 해상도가 작은 기기는 767 이하로 분류했습니다. 768이 아닌 767보다 작은 이유는 CSS @media(min-width: 768px)에서 최소값이 768, 즉 >=768이라는 의미이기 때문입니다. 따라서 @media(max- 너비: 767px) 여기서는

2. @media를 사용하여 웹 페이지 적응의 몇 가지 주요 해상도를 실현합니다

위에서 우리는 몇 가지 중요한 점이 있음을 알 수 있습니다. 그러면 우리는 우리만의 적응형 코드를 쉽게 작성할 수 있습니다

@media (min-width: 768px){ //>=768 device}

@media (min-width: 992px){ //>=992 device}

@media (min-width: 1200){ //>=1200 device}

주문에 주의하세요. 아래에 @media(min-width: 768px)를 넣으면 너무 비극적입니다,

@media (최소 너비: 1200){ //>=1200 기기}

@media (최소 너비: 992px){ //>=992 기기}

@media (최소 너비: 768px){ //>=768 기기}

1440이면 1440>768이므로 1200은 유효하지 않습니다.

그래서 min-width를 사용하면 작은 것이 위쪽에 있고 큰 것이 아래쪽에 있습니다. 마찬가지로 max-width를 사용하면 큰 것이 위쪽에 있고 작은 것이 아래쪽에 있습니다

@media (최대 너비: 1199){ //

@media (최대 너비: 991px){ //

@media (최대 너비: 767px){ //

3. 위의 입문 학습을 마친 후 고급 하이브리드 애플리케이션을 유연하게 사용할 수 있습니다

@media screen 및 (min-width:1200px){ #page{ width: 1100px; .div1{너비: 730px;}#secondary{너비:310px} }

@media 화면 및 (최소 너비: 960px) 및 (최대 너비: 1199px) { #page{ 너비: 960px }#content,. div1 {너비: 650px;}#secondary{너비:250px}select{max-width:200px} }

@media screen and (min-width: 768px) and (max-width: 959px) { #page{ width: 900px ; }#content,.div1{width: 620px;}#secondary{width:220px}select{max-width:180px} }

@media 전용 화면 및 (최소 너비: 480px) 및 (최대 너비: 767px ){ #page{ 너비: 450px; }#content,.div1{width: 420px; 위치: 상대 }#secondary{display:none}#access{width: 450px }#access a {padding-right:5px; } #img{display:none}#rss{display:none}#branding #s{display:none} }

@media 전용 화면 및 (max-width: 479px) { #page{ width: 300px } # content,.div1{너비: 300px;}#secondary{display:none}#access{width: 330px;} #access a {padding-right:10px;padding-left:10px}#access a img{display:none } #rss{display:none}#branding #s{display:none}#access ul ul a{width:100px} }

요약: 위 코드는 모니터가 디스플레이 장치로 지정된 화면을 사용하거나, be print 프린터와 같은 다른 장치의 경우 일반적으로 화면을 사용합니다. 아니면 아예 생략하세요. 미디어에 대한 자세한 설명을 보려면 Baidu에서 미디어 쿼리에 대해 알아볼 수 있습니다.

위 내용은 적응형 키 해상도를 달성하기 위해 @media에서 몇 가지 미디어 쿼리를 공유하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!