หลายๆคนที่กำลังหัดเขียนเว็บใหม่ หรือพยายามปรับแต่งเว็บของตัวเอง มักจะมีคำถามมาถามผมหลังไมค์เสมอๆครับว่า ถ้าจะให้มือถือแสดงผลแบบนั้นแบบนี้ แต่ในจอคอมแสดงอีกแบบหนึ่ง เราจะมีวิธีทำอย่างไร วันนี้ผมเลยจะมาขอเล่าถึงการทำเว็บ Responsive โดยการใช้ CSS3 ที่เรียกว่า Media Query อย่างง่ายๆกันครับ (คลิกดูวีดีโอด้านบนก่อนได้นะครับ ฮ่าๆ)
ในยุคปัจจุบันนี้คำว่า Responsive Website น่าจะเป็นคำพูดมาตรฐานในการทำเว็บไปแล้วนะครับ เพราะเว็บควรจะให้มันรองรับการแสดงผลในทุกๆอุปกรณ์ที่เข้าถึงเว็บไซต์ ดังนั้นผมจะไม่พูดถึงความหมายของคำนี้มากนัก เราจะมาดูกันเลยว่าถ้าหากว่าต้องการจะเขียนเว็บแบบ Responsive Website ต้องเขียนแบบไหน
อย่างที่พูดไปในตอนต้นครับว่า การทำเว็บแบบ Responsive มันต้องใช้ CSS3 ในการเขียน วิธีการเขียนก็ง่ายมากเลย มันก็คือ CSS ทั่วๆไปนี่แหละครับ เพียงแต่เราทำการ “ครอบ” ชุดคำสั่ง CSS ด้วย “ความกว้าง” ของหน้าจอ อีกทีนึง
คือไอ้การเขียน CSS media query นี่หลักการมันก็คือ เราเอาหน้าจอของอุปกรณ์มากำหนดว่า ถ้ากว้างเท่านั้นเท่านี้จะให้แสดงผลอย่างไร ย้ำอีกครั้งนะครับ หลักการของมันคือ เอาหน้าจอของอุปกรณ์มากำหนด
ซึ่งการเขียน css แบบปกติ มันเป็นการเขียนแล้วให้แสดงผลเหมือนกันหมดเลย สมมติว่า ผมเขียน css ของผมแบบนี้
p{
color:#000;
}
โค้ดด้านบน ไม่ว่าจะเปิดด้วยคอม ด้วยมือถือ ด้วยแท็บบลิต ข้อความที่อยู่ใน <p> ก็จะเป็นสีดำทั้งหมด
ทีนี้ สมมติว่า ผมตั้งเงื่อนไขไว้ว่า ถ้าเกิดเปิดในมือถือ ให้ข้อความใน <p> เป็นสีแดงละกัน ทำไงละ?
ใช่ครับ เราก็ต้องเอา media query มาใช้ โดยอย่างแรกเราต้องรู้ก่อนว่า เจ้าความกว้างของหน้าจอมือถือที่เราพูดถึงมันกว้างขนาดไหน? ซึ่งแน่นอนว่าแต่ละค่ายแต่ละรุ่นมันก็กว้างไม่เท่ากัน ดังนั้นเราจะใช้แบบเป็น “กว้างไม่เกิน” หรือ “กว้างอย่างน้อย” หรือ “กว้างระหว่าง” มาใช้แทน
แต่โดยส่วนตัว ผมใช้แบบ “กว้างไม่เกิน” มาควบคุมครับ เพราะกำหนดได้ง่ายกว่า ไม่ปวดหัวด้วย คำว่ากว้างไม่เกินก็คือ max-width ครับ อย่างในเคสนี้ผมให้ตัวอักษรเป็นสีแดงในกรณีที่หน้าจอขนาดกว้างไม่เกิน 480px
@media screen and (max-width : 480px){
/** เขียน CSS แบบปกติตรงนี้ได้เลยครับ */
}
โค้ดที่เราจะเขียนก็คือเขียนในระหว่าง { ….} ได้เลยครับ แบบนี้
@media screen and (max-width : 480px){
p{
color:#ff0000; /* ตัวอักษรสีแดง */
}
}
สมมติว่า ต่อมา ผมอยากจะให้มันจัดตัวอักษรแบบอยู่ตรงกลางละ? ก็เขียนปกติเลยครับ แบบนี้
@media screen and (max-width : 480px){
p{
color:#ff0000; /* ตัวอักษรสีแดง */
text-align:center /* จัดตำแหน่งข้อความให้อยู่ตรงกลาง */
}
}
ลองเพิ่มเงื่อนไขเข้าไปอีกครับ อยากให้มือถือหน้าเว็บพื้นหลังเป็นสีดำด้วย!! ก็เขียนไปอีกครับว่า
@media screen and (max-width : 480px){
p{
color:#ff0000; /* ตัวอักษรสีแดง */
text-align:center /* จัดตำแหน่งข้อความให้อยู่ตรงกลาง */
}
body{
background:#000;
}
}
ผมคิดว่าเพื่อนๆน่าจะพอเห็นภาพแล้วนะครับ ทีนี้คำถามสำคัญก็คือ แล้วเราจะรู้ได้อย่างไรละว่า ความกว้างของหน้าจอมือถือหรืออุปกรณ์ที่ว่า มันกว้างเท่าไหร่? เพราะแต่ละรุ่นก็ไม่ได้เท่ากันนี่นา
จริงๆแล้วเราไม่สามารถไปวัดความกว้างหน้าจอทั้งหมดของมือถือในท้องตลาด ได้หรอกครับ เราจะใช้การ “กำหนดจากการสังเกต” เอาครับ โดยใช้คอมพิวเตอร์นี่แหละครับ ง่ายสุดแล้ว
หลักการก็คือ ให้เราย่อขนาดหน้าจอลงเรื่อยๆ แล้วเมื่อไหร่ก็ตามที่ย่อแล้ว หน้าเว็บมันเริ่มไม่สวย เลเอาท์พัง ฟอนต์อ่านยาก นั่นแหละครับ หมายถึงความกว้าง ที่เราควรจะเขียนกำหนดการแสดงผลใหม่ (ขั้นตอนแบบนี้ศัพท์เทคนิค เรียกว่าการทำ Breakpoint – หาจุดที่เว็บเริ่มเละแล้วเขียนโค้ดใหม่)
ผมใช้ Extension ของ Google Chrome ที่ชื่อว่า Windows Resizer มาช่วยในการหาความกว้างของหน้าจอครับ
อย่างไรก็ดีครับ โดยทั่วไปแล้ว ความกว้าง ณ ตอนนี้ที่เราใช้งานกัน เป็นแบบนี้ครับ
ความกว้างสำหรับหน้าจอมือถือ
@media screen and (max-width : 480px){ ..... }
ความกว้างสำหรับหน้าจอแทบบลิต
@media screen and (max-width : 768px){ .... }
ส่วนความกว้างแบบคอมพิวเตอร์ทั่วไป เราก็เขียนแบบปกติได้เลยครับ ไม่ต้องเอาความกว้างมาครอบ :)
ผมหวังว่าบทความนี้จะช่วยให้เพื่อนๆที่สนใจในการทำเว็บ ได้เห็นภาพและเข้าใจวิธีการเขียน @media query เพิ่มขึ้นนะครับ หากมีคำถามหรือไม่สงสัยตรงไหน สามารถถามได้เลยครับ หรือมีอะไรเพิ่มเติมก็แสดงความคิดเห็นกันได้เต็มที่ ถือว่าแลกเปลี่ยนความรู้กัน
ปล. เดี๋ยวนี้มี framework สำหรับทำเว็บ Responsive มาให้เราใช้งานกันเยอะแยะมากๆ ซึ่งมันช่วยประหยัดเวลาการทำงานของเราลงได้เยอะ ผมแนะนำว่าเพื่อนๆลองไปศึกษาเพิ่มเติมดูด้วยก็ดีนะครับ อย่างเช่น Boostrap, Foundation Zurb สองตัวนี้เค้าดังระดับโลกเลย คนใช้งานกันกว้างขวางมาก เราไม่ต้องมานั่งเขียน CSS ใหม่ทุกอย่างด้วย เพียงแค่เขียนเพิ่มอะไรที่มันยังไม่มีแค่นั้นเองครับ แล้วเจอกันใหม่คร้าบ
