CSS ที่ตอบสนองต่อมือถือแสดงรูปแบบการตอบสนองหน้าจอ @media ที่แตกต่างกันตามความละเอียดที่ต่างกันอย่างไร
บทความต่อไปนี้จะแนะนำวิธีใช้ CSS เพื่อกำหนดความละเอียดที่แตกต่างกันและแสดงเค้าโครงความกว้างที่แตกต่างกันเพื่อให้ได้ความกว้างที่ปรับได้
เพื่อนที่ต้องการความช่วยเหลือสามารถอ้างอิงได้ ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน
ความแตกต่างระหว่างหน้าเว็บการพิมพ์หน้าจอ @media และ @media
- หากจำเป็นต้องใช้ css ในอุปกรณ์การพิมพ์ ให้ใช้ @media มิฉะนั้น ให้ใช้หน้าจอ @media
- อย่างไรก็ตาม สิ่งนี้ไม่จำเป็นจริงเสมอไป ที่จริง หากคุณแทนที่ "หน้าจอ" ด้วย "พิมพ์" และเขียนเป็น @media print ก็สามารถใช้ CSS บนอุปกรณ์การพิมพ์ได้
- แต่โปรดทราบว่า css ที่ประกาศโดย @media print ใช้ได้กับอุปกรณ์การพิมพ์เท่านั้น
1. คำอธิบายกรณีเล็ก DIVCSS
ก่อนอื่นเราตั้งค่า CSS ของกล่อง DIV ชื่อ ".abc" ตั้งค่าความสูงเป็น 300px และตั้งค่าเส้นขอบ CSS เป็นสีดำ
- และการตั้งค่า
margin:0 autoเลย์เอาต์อยู่ตรงกลาง และทั้งสองสไตล์ถูกกำหนดไว้ล่วงหน้าเพื่อให้ดูได้ง่าย
เราลากเบราว์เซอร์ด้วยตนเองเพื่อแสดงความกว้าง จากนั้นสังเกตว่าความกว้างของกล่องเปลี่ยนแปลงไปอย่างไร:
- เมื่อปรับความกว้างของเบราว์เซอร์เป็นความกว้างไม่เกิน 500px ระบบจะแสดง 100px ตามความกว้างของกล่อง
- เมื่อความกว้างของเบราว์เซอร์ถูกปรับให้น้อยกว่า 901px ".abc" จะแสดงตามความกว้างของกล่อง ซึ่งแสดง 200px;
- เมื่อความกว้างของเบราว์เซอร์ถูกปรับให้มากกว่า 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>หมายเหตุ: อัตราส่วนด้านอุปกรณ์
- อัตราส่วนด้านอุปกรณ์สามารถใช้เพื่อให้พอดีกับอุปกรณ์ที่มีอัตราส่วนกว้างยาวของหน้าจอเฉพาะ ซึ่งเป็นคุณสมบัติที่มีประโยชน์เช่นกัน
- ตัวอย่างเช่น เพจของเราต้องการกำหนดรูปแบบสำหรับหน้าจอปกติที่มีอัตราส่วนภาพ 4:3
- จากนั้นสำหรับจอกว้าง 16:9 และ 16:10 ให้กำหนดรูปแบบอื่น เช่น ความกว้างที่ปรับได้และความกว้างคงที่:
- หน้าจอ @media เท่านั้นและ (อัตราส่วนอุปกรณ์: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 ที่แตกต่างกันตามหน้าจอต่างๆ
หวัง Chen Weiliang บล็อก ( https://www.chenweiliang.com/ ) แชร์ "Mobile Adaptive CSS Different Screens Display @media Screen Responsiveness" ซึ่งเป็นประโยชน์สำหรับคุณ
ยินดีต้อนรับสู่การแบ่งปันลิงค์ของบทความนี้:https://www.chenweiliang.com/cwl-2074.html
ยินดีต้อนรับสู่ช่อง Telegram ของบล็อกของ Chen Weiliang เพื่อรับข่าวสารล่าสุด!
📚 คู่มือนี้มีคุณค่ามหาศาล 🌟 นี่เป็นโอกาสที่หายาก อย่าพลาด! ⏰⌛💨
แชร์และชอบถ้าคุณชอบ!
การแบ่งปันและไลค์ของคุณเป็นแรงจูงใจอย่างต่อเนื่องของเรา!