วิธีใช้ Media Queries ใน HTML และ CSS เพื่อสร้างเว็บไซต์ที่ตอบสนอง

วิธีใช้ Media Queries ใน HTML และ CSS เพื่อสร้างเว็บไซต์ที่ตอบสนอง

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





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



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





ทำความเข้าใจกับการออกแบบที่ตอบสนอง

โดยสรุปแล้ว การออกแบบที่ตอบสนองนั้นเกี่ยวข้องกับการใช้ HTML/CSS เพื่อสร้างเค้าโครงเว็บไซต์/เว็บแอปที่ปรับให้เข้ากับขนาดหน้าจอต่างๆ ใน HTML/CSS มีหลายวิธีในการบรรลุการตอบสนองในการออกแบบเว็บไซต์:

  • การใช้หน่วย rem และ em แทนพิกเซล (px)
  • การตั้งค่าวิวพอร์ต/สเกลของแต่ละหน้าเว็บ
  • การใช้แบบสอบถามสื่อ

แบบสอบถามสื่อคืออะไร?

คิวรีสื่อเป็นคุณลักษณะของ CSS ที่เผยแพร่ในเวอร์ชัน CSS3 ด้วยการเปิดตัวคุณลักษณะใหม่นี้ ผู้ใช้ CSS จะได้รับความสามารถในการปรับการแสดงผลของหน้าเว็บตามความสูงของอุปกรณ์/หน้าจอ ความกว้าง และการวางแนว (โหมดแนวนอนหรือแนวตั้ง)



อ่านเพิ่มเติม: Cheat Sheet คุณสมบัติ CSS3 ที่จำเป็น

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



การใช้แบบสอบถามสื่อ

มีหลายสิ่งที่คุณต้องคำนึงถึงเมื่อใช้คิวรี่สื่อ ได้แก่ โครงสร้าง ตำแหน่ง ช่วง และการเชื่อมโยง

โครงสร้างของแบบสอบถามสื่อ

ตัวอย่างโครงสร้างการสืบค้นสื่อ


@media only/not media-type and (expression){
/*CSS code*/
}

โครงสร้างทั่วไปของแบบสอบถามสื่อประกอบด้วย:



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

ที่เกี่ยวข้อง: การใช้ CSS เพื่อจัดรูปแบบเอกสารสำหรับการพิมพ์

ตัวอย่างการสืบค้นสื่อที่มีคำหลักเท่านั้น


@media only screen and (max-width: 450px){
body{
background-color: blue;
}
}

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

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

ตัวอย่างคิวรี่สื่อเริ่มต้น


/*design for smartphones*/
@media(max-width: 450px){
body{
background-color: blue;
}
}

ตำแหน่งของแบบสอบถามสื่อ

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

วิธีการภายในรวมถึงการเพิ่มแท็กลงในแท็กของไฟล์ HTML และการสร้างแบบสอบถามสื่อภายในพารามิเตอร์ของแท็ก

วิธีการภายนอกเกี่ยวข้องกับการสร้างคิวรีสื่อในไฟล์ CSS ภายนอกและเชื่อมโยงไปยังไฟล์ HTML ของคุณผ่านแท็ก

ช่วงของแบบสอบถามสื่อ

ไม่ว่าจะใช้คิวรี่สื่อผ่าน CSS ภายในหรือภายนอก มีแง่มุมที่สำคัญอย่างหนึ่งของภาษาสำหรับการจัดสไตล์ที่อาจส่งผลเสียต่อการทำงานของคิวรี่สื่อ CSS มีลำดับความสำคัญของกฎ เมื่อใช้ตัวเลือก CSS หรือในกรณีนี้ คิวรีสื่อ คิวรีสื่อใหม่แต่ละรายการที่เพิ่มไปยังไฟล์ CSS จะแทนที่ (หรือมีความสำคัญกว่า) คิวรีสื่อใหม่แต่ละรายการที่มาก่อน

โค้ดสืบค้นสื่อเริ่มต้นที่เรามีเหนือสมาร์ทโฟนเป้าหมาย (กว้าง 450px หรือต่ำกว่า) ดังนั้นหากคุณต้องการตั้งค่าพื้นหลังที่แตกต่างกันสำหรับแท็บเล็ต คุณอาจคิดว่าคุณสามารถเพิ่มโค้ดต่อไปนี้ในไฟล์ CSS ที่มีอยู่ก่อนได้

ตัวอย่างคิวรี่สื่อแท็บเล็ต


/* design for tablets */
@media(max-width: 800px){
body{
background-color: red;
}
}

ปัญหาเดียวคือ เนื่องจากลำดับความสำคัญ แท็บเล็ตจะมีสีพื้นหลังสีแดง และสมาร์ทโฟนก็จะมีสีพื้นหลังสีแดงเช่นกัน เนื่องจาก 450px และต่ำกว่านั้นต่ำกว่า 800px

วิธีหนึ่งในการแก้ปัญหาเล็กน้อยนี้คือการเพิ่มแบบสอบถามสื่อสำหรับแท็บเล็ตก่อนรายการสำหรับสมาร์ทโฟน หลังจะแทนที่อดีตและตอนนี้คุณจะมีสมาร์ทโฟนที่มีสีพื้นหลังสีน้ำเงินและแท็บเล็ตที่มีสีพื้นหลังสีแดง

อย่างไรก็ตาม มีวิธีที่ดีกว่าในการแยกสไตล์สำหรับสมาร์ทโฟนและแท็บเล็ตโดยไม่ต้องกังวลเกี่ยวกับลำดับความสำคัญ นี่คือคุณลักษณะของการสืบค้นสื่อที่เรียกว่าข้อกำหนดช่วง ซึ่งนักพัฒนาสามารถสร้างแบบสอบถามสื่อที่มีความกว้างสูงสุดและต่ำสุด (ช่วง)

แบบสอบถามสื่อแท็บเล็ตพร้อมตัวอย่างช่วง


/* design for tablets */
@media(max-width: 800px) and (min-width:451){
body{
background-color: red;
}
}

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

หากคุณไม่ต้องการฝังการสืบค้นสื่อลงในโค้ด CSS ของคุณ มีวิธีอื่นที่คุณสามารถใช้ได้ วิธีนี้เกี่ยวข้องกับการใช้คิวรีสื่อในแท็กของไฟล์ HTML ดังนั้นแทนที่จะมีสไตล์ชีตขนาดใหญ่ที่มีการกำหนดสไตล์สำหรับสมาร์ทโฟน แท็บเล็ต และคอมพิวเตอร์ คุณสามารถใช้ไฟล์ CSS สามไฟล์แยกกันและสร้างคิวรีสื่อของคุณในแท็กได้

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




href='tablet.css'>


โค้ดด้านบนควรอยู่ในแท็กของไฟล์ HTML ของคุณ ตอนนี้สิ่งที่คุณต้องทำคือสร้างไฟล์ CSS แยกกันสามไฟล์โดยใช้ชื่อไฟล์ main.css, tablet.css และ smartphone.css จากนั้นจึงสร้างการออกแบบเฉพาะที่คุณต้องการสำหรับแต่ละอุปกรณ์

สไตล์ในไฟล์หลักจะใช้กับทุกหน้าจอที่มีความกว้างมากกว่า 800px สไตล์ในไฟล์แท็บเล็ตจะนำไปใช้กับทุกหน้าจอที่มีความกว้างระหว่าง 450px ถึง 801px และสไตล์ในไฟล์สมาร์ทโฟนจะนำไปใช้กับทุกหน้าจอด้านล่าง 451px.

วิธีดาวน์โหลดหนังในไอแพด

ตอนนี้คุณมีเครื่องมือในการสร้างการออกแบบที่ตอบสนองแล้ว

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

เครดิตรูปภาพ: พื้นที่เชิงลบ/ Pexels

แบ่งปัน แบ่งปัน ทวีต อีเมล วิธีตั้งค่าภาพพื้นหลังใน CSS

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

อ่านต่อไป หัวข้อที่เกี่ยวข้อง
  • การเขียนโปรแกรม
  • การพัฒนาเว็บ
  • ออกแบบเว็บ
  • CSS
เกี่ยวกับผู้เขียน คาเดชา คีน(21 บทความที่ตีพิมพ์)

Kadeisha Kean เป็นนักพัฒนาซอฟต์แวร์ฟูลสแตกและนักเขียนด้านเทคนิค/เทคโนโลยี เธอมีความสามารถที่ชัดเจนในการทำให้แนวคิดทางเทคโนโลยีที่ซับซ้อนที่สุดบางส่วนง่ายขึ้น การผลิตวัสดุที่สามารถเข้าใจได้ง่ายโดยสามเณรเทคโนโลยี เธอหลงใหลในการเขียน พัฒนาซอฟต์แวร์ที่น่าสนใจ และเดินทางไปทั่วโลก (ผ่านสารคดี)

เพิ่มเติมจาก Kadeisha Kean

สมัครรับจดหมายข่าวของเรา

เข้าร่วมจดหมายข่าวของเราสำหรับเคล็ดลับทางเทคนิค บทวิจารณ์ eBook ฟรี และดีลพิเศษ!

คลิกที่นี่เพื่อสมัครสมาชิก