모바일 반응형 CSS는 해상도에 따라 다른 @media 화면 반응형 레이아웃을 어떻게 표시합니까?
다음 기사에서는 CSS를 사용하여 다양한 해상도를 결정하고 다양한 너비 레이아웃을 표시하여 적응형 너비를 달성하는 방법을 소개합니다.
도움이 필요한 친구들이 참고할 수 있으니 모두에게 도움이 되었으면 합니다.
@media와 @media 스크린 인쇄 웹 페이지의 차이점
- css를 인쇄 장치에서 사용해야 하는 경우 @media를 사용하고, 그렇지 않은 경우 @media screen을 사용합니다.
- 그러나 이것이 반드시 사실은 아니며 실제로 "screen"을 "print"로 바꾸고 @media print로 쓰면 인쇄 장치에서 CSS를 사용할 수 있습니다.
- 그러나 @media print에 의해 선언된 CSS는 인쇄 장치에서만 유효합니다.
1. DIVCSS 소형 케이스 설명
먼저 ".abc"라는 DIV 상자 CSS를 설정하고 높이를 300px로 설정하고 CSS 테두리를 검은색으로 설정합니다.
- 및 설정
margin:0 auto레이아웃은 중앙에 배치되며 이 두 스타일은 쉽게 볼 수 있도록 미리 설정되어 있습니다.
브라우저를 수동으로 끌어 너비를 표시한 다음 상자 너비가 어떻게 변경되는지 관찰합니다.
- 브라우저의 너비가 500px 이하로 조정되면 상자의 너비에 해당하는 100px가 표시됩니다.
- 브라우저의 너비가 901px 미만으로 조정되면 200px를 표시하는 상자의 너비에 해당하는 ".abc"가 표시됩니다.
- 브라우저 너비가 1201px보다 크게 조정되면 상자 개체의 너비가 1200px로 표시됩니다.
- 1200px 미만인 경우 표시 너비는 900px입니다.
2, CSS 휴대 전화 모바일 터미널 적응 코드
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
/* css注释：设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */
@media screen and (max-width: 901px) {
.abc {width: 200px;}
}
/* 设置了浏览器宽度不大于901px时 abc 显示200px宽度 */
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */- CSS 코드 순서는 CSS를 큰 것에서 작은 것으로 조판한다는 점에 유의해야 합니다(브라우저 너비가 클수록 앞면이 더 높다고 판단).
- 이는 논리적인 관계로 인해 @media의 CSS 디버깅 판단으로 인해 판단이 실패하게 됩니다.
3. HTML 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
/* 设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */
@media screen and (max-width: 900px) {
.abc {width: 200px;}
}
/* 设置了浏览器宽度不大于900px时 abc 显示200px宽度 */
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */
</style>
</head>
<body>
<div class="abc">DIVCSS5实例：我这个DIV宽度会随浏览器宽度变化哦，试试改变浏览器宽度</div>
</body>
</html>참고: 기기 종횡비
- device-aspect-ratio는 특정 화면 종횡비로 장치를 맞추는 데 사용할 수 있으며 이는 또한 유용한 속성입니다.
- 예를 들어, 우리 페이지는 종횡비가 4:3인 일반 화면의 스타일을 정의하려고 합니다.
- 그런 다음 16:9 및 16:10 와이드스크린의 경우 적응 너비 및 고정 너비와 같은 다른 스타일을 정의합니다.
- @미디어 전용 화면 및 (장치 종횡비:4/3)
4. 주요 브라우저 HTML+CSS+JS 소스 코드와 호환
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
@media screen and (max-width: 900px) {
.abc {width: 200px;}
}
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
</style>
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>
<body>
<div class="abc">DIV宽度会随浏览器宽度变化哦，改变浏览器宽度</div>
</body>
</html>위는 모바일 단말 적응형 CSS로, 다른 화면에 따라 다른 @media 화면 반응 세부 내용을 표시합니다.
희망 첸 웨이량 블로그( https://www.chenweiliang.com/ ) "모바일 적응형 CSS 다른 화면 표시 다른 @media 화면 반응"을 공유하여 도움이 되었습니다.
이 기사의 링크를 공유하는 것을 환영합니다:https://www.chenweiliang.com/cwl-2074.html
최신 업데이트를 받으려면 Chen Weiliang 블로그의 Telegram 채널에 오신 것을 환영합니다!
🔔 채널 상위 디렉토리에서 귀중한 "ChatGPT 콘텐츠 마케팅 AI 도구 사용 가이드"를 가장 먼저 받아보세요! 🌟
📚 이 가이드에는 엄청난 가치가 담겨 있습니다. 🌟이것은 흔치 않은 기회입니다. 놓치지 마세요! ⏰⌛💨
당신이 원한다면 공유하고 좋아하십시오!
당신의 공유와 좋아요는 우리의 지속적인 동기 부여입니다!
📚 이 가이드에는 엄청난 가치가 담겨 있습니다. 🌟이것은 흔치 않은 기회입니다. 놓치지 마세요! ⏰⌛💨
당신이 원한다면 공유하고 좋아하십시오!
당신의 공유와 좋아요는 우리의 지속적인 동기 부여입니다!