การออกแบบเว็บไซต์ที่เข้ากันได้กับอุปกรณ์ต่าง ๆ เป็นขั้นตอนสำคัญในการรับรองว่าผู้ใช้ต่าง ๆ สามารถเข้าถึงเว็บไซต์ได้มากที่สุด

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

บทช่วยสอนนี้จะอธิบายพร้อมตัวอย่าง พื้นฐานของการออกแบบเว็บที่ตอบสนอง วิธีการทำงานของคิวรีสื่อ และวิธีออกแบบการสืบค้นสื่อ CSS ของคุณเอง เมื่ออ่านบทช่วยสอนนี้จบ คุณจะเป็นผู้เชี่ยวชาญในการออกแบบข้อความค้นหาสื่อใน CSS

การออกแบบเว็บที่ตอบสนองและแบบสอบถามสื่อ

การออกแบบเว็บที่ตอบสนองตามอุปกรณ์หมายถึงชุดแนวทางปฏิบัติที่นักพัฒนาปรับแต่งสไตล์ชีตบนไซต์เพื่อให้สามารถแสดงผลไซต์ได้อย่างถูกต้องบนอุปกรณ์และขนาดหน้าจอที่หลากหลาย

เหตุผลที่การออกแบบเว็บแบบตอบสนองมีความสำคัญมากเพราะอุปกรณ์แสดงผลที่ผู้ดูใช้ในการดูหน้าเว็บ—รวมถึงหน้าต่างเบราว์เซอร์และขนาดหน้าจอ—จะส่งผลต่อการโหลดหน้าเว็บ หากเว็บไซต์ไม่ได้ออกแบบมาโดยคำนึงถึงอุปกรณ์และขนาดหน้าจอที่แตกต่างกัน ผู้ใช้บางรายอาจประสบปัญหาในการดูเนื้อหาทั้งหมดที่นำเสนอบนเว็บไซต์

แม้ว่าการออกแบบเว็บที่ตอบสนองตามอุปกรณ์จะครอบคลุมแนวปฏิบัติที่หลากหลาย—ตั้งแต่การใช้ flexbox ไปจนถึงสไตล์ที่เกี่ยวข้อง—การสืบค้นสื่อเป็นส่วนสำคัญของเว็บไซต์ใดๆ ที่ออกแบบโดยคำนึงถึงการตอบสนองของเว็บ

คิวรี่สื่อช่วยให้คุณสามารถปรับลักษณะที่ปรากฏบนหน้าเว็บโดยขึ้นอยู่กับประเภทของอุปกรณ์ที่ใช้ การวางแนวของอุปกรณ์ และขนาดวิวพอร์ต

เมื่อใช้คิวรี่สื่อ คุณสามารถทำให้องค์ประกอบต่างๆ ปรากฏบนเว็บไซต์ของคุณแตกต่างกันไปตามหน้าจอและอุปกรณ์ต่างๆ ที่ผู้ใช้กำลังดูไซต์ของคุณ

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

ไวยากรณ์การสืบค้นสื่อ

ในการประกาศคิวรี่สื่อใน CSS คุณต้องใช้ @media กฎ. กฎนี้อนุญาตให้คุณดำเนินการบล็อกคุณสมบัติ CSS ได้ก็ต่อเมื่อเงื่อนไขบางอย่างประเมินว่าเป็นจริง

นี่คือไวยากรณ์พื้นฐานสำหรับคิวรีสื่อ CSS:

@media media-type and (media-rule) {
	// CSS styles
}

นี่คือองค์ประกอบหลักของแบบสอบถามสื่อนี้:

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

มีสี่ประเภทสื่อที่สามารถใช้กับแบบสอบถามสื่อ ทั้งหมดนี้คือการพิมพ์ หน้าจอ และคำพูด โดยค่าเริ่มต้น ค่า all ใช้และสามารถระบุประเภทสื่อได้หลายประเภทโดยแยกแต่ละประเภทโดยใช้เครื่องหมายจุลภาค

กฎของสื่อ CSS

มีกฎสองสามประเภทที่สามารถนำไปใช้กับคิวรีสื่อได้ มาแยกย่อยแต่ละอย่างเป็นรายบุคคลกัน

ความกว้างและความสูง

ประเภทกฎหลักที่ใช้กับกฎสื่อ CSS คือความกว้างและความสูงของอุปกรณ์ กฎเหล่านี้ช่วยให้เราใช้สไตล์กับองค์ประกอบเว็บโดยขึ้นอยู่กับขนาดของคอนเทนเนอร์วิวพอร์ต คำว่า viewport container หมายถึงพื้นที่ของหน้าเว็บที่ผู้ใช้มองเห็นได้

กฎความกว้างและความสูงจะใช้เพื่อใช้สไตล์หากวิวพอร์ตเท่ากับขนาดที่แน่นอนพอดี ดังนั้น หากคุณต้องการเปลี่ยนสีข้อความของแท็ก

ทั้งหมดบนหน้าเว็บเป็นสีน้ำเงินหากวิวพอร์ตสูง 500px คุณสามารถทำได้โดยใช้กฎนี้:

@media screen and (width: 500px) {
	p {
		color: blue;
	}
}

กฎนี้กำหนดสีข้อความของแท็ก

ทั้งหมดเป็น blue หากความกว้างของวิวพอร์ตเท่ากับ 500px

ในกรณีส่วนใหญ่ คุณจะต้องใช้คิวรีสื่อโดยใช้ช่วง ตัวอย่างเช่น คุณอาจต้องการเปลี่ยนขนาดแบบอักษรของหน้าเว็บหากขนาดวิวพอร์ตเท่ากับหรือมากกว่า 500px นั่นคือที่มาของรูปแบบความกว้างต่ำสุดและความสูงต่ำสุด

หากเราต้องการเปลี่ยนสีข้อความขององค์ประกอบ

ทั้งหมดเป็นสีน้ำเงิน หากความกว้างของวิวพอร์ตเท่ากับมากกว่า 500px เราสามารถใช้กฎต่อไปนี้:

@media screen and (min-width: 500px) {
	p {
		color: blue;
	}
}

กฎนี้กำหนดสีข้อความขององค์ประกอบ

ทั้งหมดเป็นสีน้ำเงิน แต่ถ้าความกว้างของวิวพอร์ตเท่ากับหรือมากกว่า 500px วิธีการทำงานของคิวรีสื่อนี้คือเงื่อนไข min-width:500px จะถูกประเมิน ซึ่งจะตรวจสอบว่าความกว้างของวิวพอร์ตเท่ากับหรือมากกว่า 500px หากเงื่อนไขนี้ประเมินเป็นจริง กฎใน p . ของเรา สไตล์ถูกนำไปใช้กับหน้าเว็บ

ปฐมนิเทศ

นอกจากนี้ สามารถใช้คิวรีสื่อเพื่อปรับใช้สไตล์กับหน้าเว็บโดยขึ้นอยู่กับการวางแนวของอุปกรณ์

สมมติว่าเราต้องการตั้งค่าขนาดข้อความขององค์ประกอบ h2 ทั้งหมดเป็น 20px หากผู้ใช้กำลังดูหน้าเว็บของเราในโหมดแนวนอน เราสามารถทำได้โดยใช้รหัสนี้:

@media (orientation: landscape) {
	h2 {
		font-size: 20px;
	}
}

กฎนี้จะตรวจสอบว่าผู้ใช้กำลังดูหน้าเว็บในโหมดแนวนอนหรือไม่ และกำหนดขนาดแบบอักษรขององค์ประกอบ

ทั้งหมดเป็น 20px หากเงื่อนไขนั้นประเมินว่าเป็นจริง

ตามค่าเริ่มต้น เดสก์ท็อปจะใช้การวางแนวนอน

ตัวอย่าง CSS Media Query

มาดูการสืบค้นสื่อตัวอย่างสองตัวอย่างเพื่อแสดงให้เห็นว่าคุณสามารถเขียนคิวรี่สื่อของคุณเองใน CSS ได้อย่างไร

ตัวอย่างการสืบค้นสื่อพื้นฐาน:ซ่อนองค์ประกอบ

สมมติว่าเรากำลังออกแบบเว็บไซต์และต้องการให้กล่องแสดง This site is in beta . บนอุปกรณ์พกพาทั้งหมด ช่องนี้ควรปรากฏบนอุปกรณ์มือถือเท่านั้น เนื่องจากเรายังคงทดสอบประสบการณ์มือถือของเรา

เราสามารถสร้างกล่องนี้โดยใช้รหัสต่อไปนี้:

<html>

<p class="betaBox">This site is in beta.</p>
<html>
  
<style>

.betaBox {
	background-color: orange;
	padding: 10px;
}
<style>
@media screen and (max-width: 600px) {
	.betaBox {
		display: none;
	}
}

รหัสของเราส่งคืน:

มาทำลายรหัสของเรากัน ในไฟล์ HTML ของเรา เราได้กำหนดแท็ก

ซึ่งรวมถึงข้อความ This site is in beta . คลาสที่กำหนดให้กับแท็ก

คือ betaBox .

ในไฟล์ CSS ของเรา เราระบุสองสไตล์ รูปแบบ .betaBox กำหนดสีพื้นหลังขององค์ประกอบใดๆ ที่มีชื่อคลาส betaBox เป็นสีส้มและสร้างช่องว่างภายใน 10px ระหว่างเนื้อหาขององค์ประกอบและเส้นขอบ

กฎถัดไปใช้แบบสอบถามสื่อ ในการสืบค้นสื่อของเรา max-width:600px จะบอกเบราว์เซอร์ของเราว่าควรใช้กฎของสไตล์ก็ต่อเมื่อวิวพอร์ตแคบกว่า 600px ดังนั้น หากผู้ใช้ดูไซต์ของเราบนอุปกรณ์มือถือ สไตล์นี้จะถูกเรียกใช้

หากดำเนินการค้นหาสื่อของเรา display:none rule จะถูกนำไปใช้กับทุกองค์ประกอบที่มีชื่อคลาส .betaBox .

ตัวอย่างการสืบค้นสื่อหลายรายการ:ขนาดตัวอักษร

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

สมมติว่าเรากำลังออกแบบเว็บไซต์และเราต้องการให้ขนาดแบบอักษรของส่วนหัว

เปลี่ยนแปลงตามขนาดหน้าจอ นี่คือกฎที่เราต้องการนำไปใช้กับเว็บไซต์ของเรา:

• หากความกว้างของหน้าจอเท่ากับหรือน้อยกว่า 480px ขนาดแบบอักษรของส่วนหัวควรเป็น 16px
• หากความกว้างของหน้าจอเท่ากับ 481px และเท่ากับหรือน้อยกว่า 600px ขนาดแบบอักษรของส่วนหัวควรเป็น 20px
• หากความกว้างของหน้าจอเท่ากับหรือมากกว่า 601px ขนาดแบบอักษรของส่วนหัวควรเป็น 24px

เราสามารถใช้แบบสอบถามสื่อสามรายการต่อไปนี้เพื่อเปลี่ยนขนาดของแบบอักษรบนหน้าเว็บของเราขึ้นอยู่กับขนาดหน้าจอของผู้ใช้:

<html>

<h1>This is an example header.</h1>
<html>
  
<style>

@media screen and (min-width: 480px) {
	h1 {
		font-size: 16px;
	}
}

@media screen and (min-width: 481px) and (max-width: 600px) {
	h1 {
		font-size: 20px;
	}
}

@media screen and (min-width: 601px) {
	h1 {
		font-size: 24px;
	}
}
<style>

ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS

มาดูกันว่าโค้ดของเราทำงานอย่างไร ในไฟล์ HTML ของเรา เราได้กำหนดส่วนหัวของตัวอย่างโดยใช้แท็ก

ซึ่งแสดงข้อความ This is an example header .

จากนั้น ในไฟล์ CSS ของเรา เราได้กำหนดคิวรี่สื่อสามรายการ

แบบสอบถามสื่อชุดแรกจะตรวจสอบว่าขนาดของวิวพอร์ตของเบราว์เซอร์เท่ากับหรือน้อยกว่า 480px (โดยใช้ความกว้างสูงสุด:480px) และกำหนดขนาดแบบอักษรขององค์ประกอบ

ทั้งหมดเป็น 16px หากคำสั่งนี้ประเมินว่าเป็นจริง

แบบสอบถามสื่อที่สองตรวจสอบว่าขนาดของวิวพอร์ตเท่ากับหรือมากกว่า 481px (โดยใช้ความกว้างต่ำสุด:481px) และเท่ากับหรือน้อยกว่า 600px (โดยใช้ความกว้างสูงสุด:600px) หากค่านี้ประเมินว่าเป็นจริง ขนาดแบบอักษรสำหรับองค์ประกอบ

ทั้งหมดจะถูกตั้งค่าเป็น 20px

แบบสอบถามสื่อที่สามตรวจสอบว่าขนาดของวิวพอร์ตมากกว่า 601px หรือไม่ (โดยใช้ความกว้างต่ำสุด:601px) หากกฎนี้ประเมินเป็นจริง ขนาดแบบอักษรขององค์ประกอบ

ทั้งหมดจะเปลี่ยนเป็น 24px

เบรกพอยต์การสืบค้นสื่อ

เบรกพอยต์ใช้เพื่อกำหนดจุดที่เว็บไซต์จะใช้การสืบค้นสื่อ

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

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

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

จากนั้น เมื่อคุณระบุประเด็นเหล่านี้แล้ว คุณสามารถเขียนกฎสื่อที่กำหนดเองได้ ตัวอย่างเช่น คุณอาจตระหนักว่าแท็ก