วิธีการ - จุดพักอุปกรณ์ทั่วไป
เรียนรู้วิธีใช้คิวรีสื่อสำหรับเบรกพอยต์ทั่วไปของอุปกรณ์
เบรกพอยต์อุปกรณ์ทั่วไป
มีหน้าจอและอุปกรณ์มากมายที่มีความสูงและความกว้างต่างกัน ดังนั้นจึงเป็นเรื่องยากที่จะสร้างเบรกพอยต์ที่แน่นอนสำหรับแต่ละอุปกรณ์ เพื่อให้ง่ายขึ้น คุณสามารถกำหนดเป้าหมายกลุ่มทั่วไปห้ากลุ่ม:
ตัวอย่าง
/*
Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px)
{...}
/* Small devices (portrait tablets and large phones, 600px and up)
*/
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up)
*/
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large
laptops and desktops,
1200px and up) */
@media only screen and (min-width: 1200px) {...}
หน้าที่เกี่ยวข้อง
บทช่วยสอน CSS: CSS Media Queries
บทช่วยสอน CSS: ตัวอย่างคิวรีสื่อ CSS
การอ้างอิง CSS: กฎ @media
บทช่วยสอน RWD: การออกแบบเว็บที่ตอบสนองด้วยคิวรีสื่อ
บทช่วย สอน JavaScript: window.matchMedia() method