ตั้งแต่ปี 2562 แพลตฟอร์ม Android และ iOS ทั้งสองได้เริ่มเล่น Dark Mode แน่นอนว่าไม่มีอะไรผิดปกติกับเรื่องนี้ แต่เมื่อหน้าของเราถูกเปิดใช้งานโดยผู้ใช้ในโหมดมืดบิ๊กสีขาวแบบดั้งเดิมจะถูกตาบอดทันที
ที่นี่ฉันจะพูดคุยสั้น ๆ เกี่ยวกับวิธีการทำให้หน้าเว็บรองรับโหมดมืด
เตรียมตัวในความเป็นจริงเราเพียงแค่ต้องใช้แบบสอบถามสื่อที่ต้องการสี-สีใน CSS
HTML
<! doctype html> <html lang = en> <head> <meta charset = utf-8> <meta name = viewport content = width = ความกว้างของอุปกรณ์, ระดับเริ่มต้น = 1.0, ระดับต่ำสุด = 1.0, maximum-scale = 1.0, user-scalable = no> class = models> <h1> ข้อความทดสอบ </h1> </div> </body> </html>
CSS
.back {พื้นหลัง: สีขาว; สี: #555; Text-Align: Center} @Media (Prefers-Color-Scheme: Dark) {.back {พื้นหลัง: #333; สี: สีขาว;} .models {border: solid 1px #00ff00}}@media (prefers-color-scheme: Light) {.back {พื้นหลัง: สีขาว; สี: #555;} .models {Border: Solid 1px #2B85E4}}}ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น