การออกแบบเว็บที่ตอบสนอง- แบบสอบถามสื่อ
แบบสอบถามสื่อคืออะไร?
แบบสอบถามสื่อเป็นเทคนิค CSS ที่นำมาใช้ใน CSS3
ใช้@media
กฎเพื่อรวมบล็อกของคุณสมบัติ CSS เฉพาะเมื่อเงื่อนไขบางอย่างเป็นจริง
ตัวอย่าง
หากหน้าต่างเบราว์เซอร์มีขนาด 600px หรือเล็กกว่านั้น สีพื้นหลังจะเป็นสีฟ้าอ่อน:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
เพิ่มเบรกพอยต์
ก่อนหน้านี้ในบทช่วยสอนนี้ เราได้สร้างหน้าเว็บที่มีแถวและคอลัมน์ และมันก็ตอบสนองได้ แต่กลับดูไม่ดีในหน้าจอขนาดเล็ก
แบบสอบถามสื่อสามารถช่วยได้ เราสามารถเพิ่มเบรกพอยต์ซึ่งบางส่วนของการออกแบบจะทำงานแตกต่างกันในแต่ละด้านของเบรกพอยต์
เดสก์ทอป
โทรศัพท์
ใช้แบบสอบถามสื่อเพื่อเพิ่มเบรกพอยต์ที่ 768px:
ตัวอย่าง
เมื่อหน้าจอ (หน้าต่างเบราว์เซอร์) มีขนาดเล็กกว่า 768px แต่ละคอลัมน์ควรมีความกว้าง 100%:
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width:
100%;}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
ออกแบบสำหรับมือถือก่อนเสมอ
Mobile First หมายถึง การออกแบบสำหรับมือถือก่อนที่จะออกแบบสำหรับเดสก์ท็อปหรืออุปกรณ์อื่นๆ (ซึ่งจะทำให้หน้าแสดงเร็วขึ้นบนอุปกรณ์ขนาดเล็ก)
ซึ่งหมายความว่าเราต้องทำการเปลี่ยนแปลงบางอย่างใน CSS ของเรา
แทนที่จะเปลี่ยนรูปแบบเมื่อความกว้างมีขนาดเล็กกว่า 768px เราควรเปลี่ยนการออกแบบเมื่อความกว้างมีขนาดใหญ่กว่า 768px สิ่งนี้จะทำให้การออกแบบของเราเป็นมือถืออันดับแรก:
ตัวอย่าง
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width:
768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
เบรกพอยต์อีกแห่ง
คุณสามารถเพิ่มเบรกพอยต์ได้มากเท่าที่คุณต้องการ
เราจะแทรกจุดพักระหว่างแท็บเล็ตและโทรศัพท์มือถือด้วย
เดสก์ทอป
ยาเม็ด
โทรศัพท์
เราทำได้โดยเพิ่มการสืบค้นสื่ออีกหนึ่งรายการ (ที่ 600px) และชุดคลาสใหม่สำหรับอุปกรณ์ที่มีขนาดใหญ่กว่า 600px (แต่เล็กกว่า 768px):
ตัวอย่าง
โปรดทราบว่าคลาสทั้งสองชุดเกือบจะเหมือนกัน ความแตกต่างเพียงอย่างเดียวคือชื่อ ( col-
และcol-s-
):
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}
@media only screen and (min-width:
768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
อาจดูแปลกที่เรามีสองชุดของคลาสที่เหมือนกัน แต่มันทำให้เรามีโอกาสใน HTMLเพื่อตัดสินใจว่าจะเกิดอะไรขึ้นกับคอลัมน์ที่จุดพักแต่ละจุด:
ตัวอย่าง HTML
สำหรับเดสก์ท็อป:
ส่วนแรกและส่วนที่สามจะครอบคลุมแต่ละคอลัมน์ 3 คอลัมน์ ส่วนตรงกลางจะครอบคลุม 6 คอลัมน์
สำหรับแท็บเล็ต:
ส่วนแรกจะขยาย 3 คอลัมน์ ส่วนที่สองจะขยาย 9 และส่วนที่สามจะแสดงด้านล่างของสองส่วนแรก และจะขยาย 12 คอลัมน์:
<div class="row">
<div class="col-3 col-s-3">...</div>
<div
class="col-6 col-s-9">...</div>
<div
class="col-3 col-s-12">...</div>
</div>
เบรกพอยต์อุปกรณ์ทั่วไป
มีหน้าจอและอุปกรณ์มากมายที่มีความสูงและความกว้างต่างกัน ดังนั้นจึงเป็นเรื่องยากที่จะสร้างเบรกพอยต์ที่แน่นอนสำหรับแต่ละอุปกรณ์ เพื่อให้ง่ายขึ้น คุณสามารถกำหนดเป้าหมายห้ากลุ่ม:
ตัวอย่าง
/*
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 ที่จะใช้งานได้เมื่อหน้าต่างเบราว์เซอร์กว้างกว่าความสูงเท่านั้น ซึ่งเรียกว่า "แนวนอน"
ตัวอย่าง
หน้าเว็บจะมีพื้นหลังสีฟ้าอ่อนหากการวางแนวอยู่ในโหมดแนวนอน:
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
}
ซ่อนองค์ประกอบด้วยการสืบค้นสื่อ
การใช้งานทั่วไปของคิวรี่สื่อคือการซ่อนองค์ประกอบบนหน้าจอขนาดต่างๆ:
ตัวอย่าง
/* If the screen size is 600px wide or less, hide the element */
@media
only screen and (max-width: 600px) {
div.example {
display: none;
}
}
เปลี่ยนขนาดตัวอักษรด้วย Media Queries
คุณยังสามารถใช้การสืบค้นสื่อเพื่อเปลี่ยนขนาดฟอนต์ขององค์ประกอบในขนาดหน้าจอต่างๆ ได้:
ขนาดตัวอักษรตัวแปร
ตัวอย่าง
/* If the screen size is 601px or
more, set the font-size of <div> to 80px */
@media only screen and (min-width:
601px) {
div.example {
font-size: 80px;
}
}
/* If the screen size is 600px or
less,
set the font-size of <div> to 30px */
@media only screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
CSS @media อ้างอิง
สำหรับภาพรวมของสื่อทุกประเภทและคุณลักษณะ/นิพจน์ โปรดดูที่ กฎ @media ในข้อมูลอ้างอิง CSS ของเรา