วิธีใช้ CSS สำหรับคอมพิวเตอร์/มือถือแต่ละเครื่อง [WordPress]

2019 7 年月日 102021 7 年月日 28

1. สมมติว่าสถานการณ์นี้
2. ทาง
3. อ้างอิง: ความกว้างหน้าจอ

สมมติว่าสถานการณ์นี้

ฉันต้องการแสดง CSS เฉพาะบนหน้าจอคอมพิวเตอร์ / มือถือ
ฉันเปลี่ยนการออกแบบด้วย CSS เพิ่มเติม แต่มันยุบบนสมาร์ทโฟน
ฉันต้องการตั้งค่าช่องว่างภายในและระยะขอบที่ตรงกับอุปกรณ์ เช่น สมาร์ทโฟน/แท็บเล็ต/พีซี
จำนวน CSS ที่คุณต้องการใช้นั้นมีไม่มาก

ทาง

หลังจาก "@media screen" ให้ระบุความกว้างหน้าจอของอุปกรณ์ที่คุณต้องการแสดงด้วย "และ ( )" และป้อนรหัส CSS ใน "{ }"　

สะท้อนเฉพาะพีซี

หน้าจอ @media และ (ความกว้างต่ำสุด: 980px) { ใส่ CSS ที่นี่ }

สะท้อนเฉพาะแท็บเล็ต

หน้าจอ @media และ (ความกว้างต่ำสุด: 481px) และ (ความกว้างสูงสุด: 979px) { ใส่ CSS ที่นี่ }

สะท้อนเฉพาะมือถือ

หน้าจอ @media และ (ความกว้างสูงสุด: 480px) { ใส่ CSS ที่นี่ }

พีซีและแท็บเล็ตเท่านั้น หรือ แท็บเล็ตและมือถือเท่านั้น

/* desktop and tablet */ @media screen and (mix-width: 481px){ css here} /* tablet and mobile */ @media screen and (max-width: 980px) { css here }

「ความกว้างสูงสุด: 480px" หมายความว่าความกว้างของหน้าจอคืออุปกรณ์สูงสุด 480 พิกเซล = 480px หรือน้อยกว่าสมาร์ทโฟน ฯลฯ

กลับกัน"ความกว้างขั้นต่ำ: 980px"ฟัน,ขั้นต่ำ 980 px = 980 px ขึ้นไปคอมพิวเตอร์ของฉันรู้สึกเหมือนความกว้างของหน้าจอ

พีซีและแท็บเล็ตเท่านั้น

ความกว้างของหน้าจออ้างอิงจากข้อมูลต่อไปนี้ ซึ่งใช้กับอุปกรณ์ส่วนใหญ่

มาร์ทโฟน	: 480px หรือน้อยกว่า
ット	: 768~980px
พีซี	: 980px ขึ้นไป

อ้างอิง: ความกว้างหน้าจอ

แม้แต่กับสมาร์ทโฟน หากคุณวางมันลงด้านข้าง ก็จะมีมากกว่า 480 พิกเซลแม้แต่ในคอมพิวเตอร์ส่วนบุคคล หากแสดงเพียงครึ่งหน้าจอ ก็จะเท่ากับความกว้างของแท็บเล็ต

บน iPhone รูปภาพต่อไปนี้สามารถใช้เป็นข้อมูลอ้างอิงสำหรับขนาดหน้าจอได้ ใน CSS ความกว้างของหน้าจอคือพิกเซล (พิกเซล)แต่ในด้านอุปกรณ์จุดโปรดทราบว่าจะแสดงเป็น .