เครื่องสร้าง Viewport Media Query
สร้าง CSS media queries สำหรับการออกแบบเว็บที่ตอบสนอง
การตั้งค่า Media Query
กำหนดค่าเงื่อนไข media query
เงื่อนไข 1
ค่าที่ตั้งไว้ล่วงหน้า
เลือกรูปแบบ media query ที่ใช้บ่อย
CSS ที่สร้างขึ้น
@media screen and (max-width: 768px) {
/* Your CSS rules here */
}จุดแบ่งทั่วไป
มือถือ:
max-width: 480pxแท็บเล็ต:
481px - 768pxเดสก์ท็อป:
min-width: 1024pxเดสก์ท็อปขนาดใหญ่:
min-width: 1200pxคู่มือ Media Query
คุณสมบัติสื่อหลัก
- • width/height: ความกว้าง/ความสูงของวิวพอร์ต
- • min-width/max-width: เงื่อนไขความกว้างขั้นต่ำ/สูงสุด
- • orientation: การวางแนวหน้าจอ (แนวตั้ง/แนวนอน)
- • resolution: ความละเอียดหน้าจอ (จอแสดงผลเรตินา ฯลฯ)
- • hover: การรองรับความสามารถในการโฮเวอร์
- • pointer: ความแม่นยำของตัวชี้ (สัมผัส/เมาส์)
เคล็ดลับการใช้งาน
- • แนวทาง Mobile First: ใช้ min-width เพื่อออกแบบจากหน้าจอขนาดเล็ก
- • รวมเงื่อนไขที่ซับซ้อนด้วยตัวดำเนินการเชิงตรรกะ
- • ใช้ประเภทสื่อสิ่งพิมพ์สำหรับสไตล์การพิมพ์แยกต่างหาก
- • ใช้ความละเอียดสำหรับการรองรับการแสดงผลความละเอียดสูง