CSS มีเดีย - ตัวอย่าง
- หน้าก่อน CSS สำหรับคำที่ต้องการค้นหา
- หน้าต่อไป สัญลักษณ์ RWD
CSS มีเดีย - ตัวอย่างเพิ่มเติม
ให้ดูตัวอย่างเพิ่มเติมที่ใช้มีเดีย
มีทางเทคนิคที่เป็นที่นิยมเพื่อส่งมอบสไตล์ที่ที่มีการปรับแต่งเฉพาะอุปกรณ์ต่าง ๆ นั่นก็คือ มีเดีย (media queries)
ตัวอย่างง่ายๆ หนึ่งนี้จะแสดงว่าเราจะเปลี่ยนสีพื้นหลังของอุปกรณ์ต่าง ๆ
ตัวอย่าง
/* จะตั้งสีพื้นหลังของ body เป็นสีสนิ�าม */
body {
background-color: tan;
}
/* ในหน้าจอที่มีขนาดหน้าจอน้อยกว่าหรือเท่า 992 พิกเซล จะตั้งสีพื้นหลังเป็นสีสky */
@media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
/* ในหน้าจอที่มีขนาดหน้าจอ 600 พิกเซลหรือน้อยกว่า จะตั้งสีพื้นหลังเป็นสีเมล็ดโรย */
@media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
คุณอยากรู้ว่าทำไมเราจึงใช้ 992px และ 600px อย่างแน่นอนหรือไม่? นั่นคือจุดหยุดที่พวกเราเรียกว่า 'จุดหยุดทั่วไป' (typical breakpoints) คุณสามารถดูได้ใน วิธีออกแบบเว็บไซต์แบบตอบสนอง Web เรียนรู้เกี่ยวกับข้อมูลจุดหยุดที่พบบ่อยใน HTML มากยิ่งขึ้น
คำถามของเมนู
ในตัวอย่างนี้ เราใช้คำถามเพื่อสร้างเมนูนำทางที่เปลี่ยนแปลงตามที่ต้องการบนหน้าจอที่มีขนาดต่างกัน:
ตัวอย่าง
/* ตัวแทนของตัวแก้ไขnavbar */
.topnav {
overflow: hidden;
background-color: #333;
}
/* ลิงก์ของ Navbar */
.topnav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* บนหน้าจอที่มีความกว้าง 600 พิกเซลล์ หรือน้อยกว่า ทำให้ลิงก์ของเมนูติดกันแทนที่จะจัดแบ่งอย่างขนานตรง */
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}
คำถามของคอลัมน์
การใช้คำถามที่มีอยู่อีกหนึ่งคือสร้างตัวแบ่งเนื้อหาที่เปลี่ยนแปลงตามที่ต้องการ ในตัวอย่างนี้ เราสร้างตัวแบ่งเนื้อหาที่เปลี่ยนแปลงระหว่างสี่คอลัมน์ สองคอลัมน์ และคอลัมน์เต็มหน้าจอ ขึ้นอยู่กับขนาดหน้าจอที่ต่างกัน:
หน้าจอขนาดใหญ่:
หน้าจอขนาดปานกลาง:
หน้าจอขนาดเล็ก:
ตัวอย่าง
/* สร้างคอลัมน์สี่คอลัมน์ที่ติดกันอย่างเหมือนกัน */
.column {
float: left;
width: 25%;
}
/* บนหน้าจอที่มีความกว้าง 992 พิกเซลล์ หรือน้อยกว่า จากสี่คอลัมน์เปลี่ยนเป็นสองคอลัมน์ */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* บนหน้าจอที่มีความกว้างไม่เกินหรือเท่า 600 พิกเซลล์ ทำให้คอลัมน์ติดกันแทนที่จะจัดแบ่งอย่างขนานตรง */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
คำแนะนำ:วิธีที่สร้างตัวแบ่งเนื้อหาที่สมานุกขนานของยุคใหม่คือ CSS Flexbox (โปรดดูตัวอย่างด้านล่าง) แต่ Internet Explorer 10 และเวอร์ชั่นก่อนหน้านี้ไม่สนับสนุนมัน ถ้าต้องการสนับสนุน IE6-10 ให้ใช้ float (เช่นที่แสดงในลักษณะนี้)。
เพื่อเรียนรู้เกี่ยวกับเซ็ฟท์เวิร์คแบบแบ่งเนื้อหาที่เปลี่ยนแปลงตามที่ต้องการ โปรดเรียน CSS Flexbox บทนี้。
เพื่อเรียนรู้เกี่ยวกับทฤษฎีวิเคราะห์เว็บแอปพลิเคชันที่เปลี่ยนแปลงตามที่ต้องการ โปรดเรียน วิธีออกแบบเว็บไซต์แบบตอบสนอง Web.
ตัวอย่าง
/* ตัวแทนของตัวแก้ไขแบบแบ่งเนื้อหาที่เปลี่ยนแปลงตามที่ต้องการ */
.row {
display: flex;
flex-wrap: wrap;
}
/* สร้างคอลัมน์สี่คอลัมน์ที่เท่ากัน */
.column {
flex: 25%;
padding: 20px;
}
/* บนหน้าจอที่มีความกว้าง 992 พิกเซลล์ หรือน้อยกว่า จากสี่คอลัมน์เปลี่ยนเป็นสองคอลัมน์ */
@media screen and (max-width: 992px) {
.column {
flex: 50%;
}
}
/* บนหน้าจอที่มีความกว้างไม่เกินหรือเท่า 600 พิกเซลล์ ทำให้คอลัมน์ติดกันแทนที่จะจัดแบ่งอย่างขนานตรง */
@media screen and (max-width: 600px) {
.row {
flex-direction: column;
}
}
การซ่อนองค์ประกอบด้วยคำถามมีเดียวกัน:
การใช้งานของคำถามมีเดียวกันที่มีอยู่อีกหนึ่งคือการซ่อนองค์ประกอบบนหน้าจอที่มีขนาดจอต่างกัน:
ฉันจะซ่อนในหน้าจอเล็ก
ตัวอย่าง
/* หากขนาดหน้าจอในระดับ 600 พิกเซล หรือน้อยกว่า ซ่อนองค์ประกอบนี้ */
@media screen and (max-width: 600px) {
div.example {
display: none;
}
}
เปลี่ยนขนาดตัวอักษรด้วย media query
คุณยังสามารถใช้ media query ต่อการเปลี่ยนขนาดตัวอักษรขององค์ประกอบต่างๆ บนหน้าจอที่มีขนาดต่างๆ:
ขนาดตัวอักษรที่เปลี่ยนแปลงได้
ตัวอย่าง
/* หากขนาดหน้าจอมากกว่า 600 พิกเซล ตั้งค่าขนาดของตัวอักษรของ <div> ให้เป็น 80 พิกเซล */
@media screen and (min-width: 600px) {
div.example {
font-size: 80px;
}
}
/* หากขนาดหน้าจอในระดับ 600px หรือน้อยกว่า ตั้งค่าขนาดของตัวอักษรของ <div> ให้เป็น 30px */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
คลังภาพที่มีการยืดตัว
ในตัวอย่างนี้ เราจะใช้ media query พร้อมกับ flexbox ต่อการสร้างคลังภาพที่มีการตอบสนองทางรูปแบบ:
ตัวอย่าง
เว็บไซต์ที่มีการยืดตัว
ในตัวอย่างนี้ เราจะใช้ media query พร้อมกับ flexbox ต่อการสร้างเว็บไซต์ที่มีการตอบสนองทางรูปแบบ ที่มีแถวนำทางและเนื้อหาที่สามารถยืดตัวได้:
ตัวอย่าง
ทิศทาง: รูปของมนุษย์ / ภาพแนวตรง
media query ยังสามารถใช้เพื่อเปลี่ยนรูปแบบหน้าเว็บตามที่อยู่ของเส้นทางของเว็บเบราว์เซอร์ได้เช่นกัน。
คุณสามารถตั้งค่าคุณสมบัติ CSS หลายรายการที่มีผลเมื่อความกว้างของหน้าต่างบราว์เซอร์มากกว่าความสูงของเธอ หรือที่เรียกว่าโหมดแนวตรง:
ตัวอย่าง
ถ้าที่อยู่ของเส้นทางอยู่ในโหมดภาพแนวตรง ใช้สีพื้นหลังสีฟ้าขาว:
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
ความกว้างของฉบับจากความสูง
คุณยังสามารถตั้งค่าความกว้างของฉบับมากกว่าความสูงโดยใช้รูปแบบ max-width และ min-width ได้เช่นกัน。
ตัวอย่างเช่น ขณะที่ความกว้างของเว็บเบราว์เซอร์อยู่ระหว่าง 600 ถึง 900 พิกเซล แก้ไขรูปแบบของ <div> อิเลิญต่อ:
ตัวอย่าง
@media screen and (max-width: 900px) and (min-width: 600px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
ใช้ค่าเพิ่มเติม: ในตัวอย่างด้านล่างนี้ เราใช้ comma (ที่คล้ายกับตัวอักษร OR) เพื่อเพิ่มคำสั่ง media query ติดตั้งอยู่กับคำสั่ง media query ที่มีอยู่แล้ว:
ตัวอย่าง
/* ขณะที่ความกว้างของหน้าจออยู่ระหว่าง 600 พิกเซลถึง 900 พิกเซล หรือมากกว่า 1100 พิกเซล - เปลี่ยนรูปแบบของ <div> */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
CSS @media คู่มือ
สรุปทั้งหมดของรูปแบบและคุณสมบัติ/การแสดงทั้งหมด โปรดดู CSS @media คู่มือ.
คำแนะนำ:หากต้องการเรียนรู้เกี่ยวกับออกแบบเว็บไซต์แบบตอบสนอง Web (ทางเลือกสำหรับอุปกรณ์และหน้าจอต่างๆ) และการใช้ media query ตัวเลื่อง โปรดอ่าน วิธีออกแบบเว็บไซต์แบบตอบสนอง Web.
- หน้าก่อน CSS สำหรับคำที่ต้องการค้นหา
- หน้าต่อไป สัญลักษณ์ RWD
