รับทําเว็บไซต์ รับทําseo
บทความที่น่าสนใจ

บทความ ที่น่าสนใจ

Media Queries คืออะไร ช่วยตรวจสอบ Device ได้อย่างไร

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

     

    จะใช้งาน Media Queries ได้อย่างไร

     

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

     

    ต้องระบุคุณสมบัติของ Device ที่เราต้องการแสดงผลตามที่เรากำหนด

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

     

    คำสั่งต่างๆ ที่ใช้งานร่วมกับ Media Queries

     

    width**

    ใช้ตรวจสอบความกว้างของพื้นที่แสดงผล โดยวัดจากความกว้างของพื้นที่ ที่ใช้แสดงผลเว็บไซต์ เช่น ความกว้างของ Browser โดยจะวัดรวมเอาพื้นที่ของ Scrollbar ด้วย (ถ้ามี)

     

    height**

    ใช้ตรวจสอบความสูงของพื้นที่แสดงผล โดยวัดจากความสูงของพื้นที่ ที่ใช้แสดงผลเว็บไซต์ เช่น ความสูงของ Browser โดยจะวัดรวมเอาพื้นที่ของ Scrollbar ด้วย (ถ้ามี)

     

    ตัวอย่างการเขียนตรวจสอบ width และ height

     

    <link rel="stylesheet" media="print and (min-width: 25cm)" href="http://…" />

    @media screen and (min-width: 400px) and (max-width: 700px) { … }

     

    device-width**

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

     

    device-height**

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

     

    ตัวอย่างการเขียนตรวจสอบ device-width และ device-height

     

    <link rel="stylesheet" media="screen and (device-height: 600px)" />

    @media screen and (device-width: 800px) { … }

     

    orientation

    ใช้ตรวจสอบการหมุนของจอว่าอยู่ในแนวตั้ง หรือ แนวนอน โดยคำสั่งนี้จะทำงานกับ ภาพ Bitmap เท่านั้น

     

    ตัวอย่างการเขียนตรวจสอบ orientation

     

     @media all and (orientation:portrait) { … } @media all and (orientation:landscape) { … } 

     

    aspect-ratio**

    ใช้ตรวจสอบสัดส่วน ของ ภาพ Bitmap ที่แสดงผลบนหน้าจอเท่านั้น

     

    device-aspect-ratio**

    ใช้ตรวจสอบสัดส่วนการแสดงผล ของอุปกรณ์ว่า ขณะนี้จอนั้นแสดงผล ภาพ Bitmap อยู่ที่เท่าไหร่ เช่น 4:3, 16:9, 1280:720 เป็นต้น

     

    ตัวอย่างการเขียนตรวจสอบ aspect-ratio และ device-aspect-ratio

     

     @media screen and (device-aspect-ratio: 16/9) { … } @media screen and (device-aspect-ratio: 32/18) { … } @media screen and (device-aspect-ratio: 1280/720) { … } @media screen and (device-aspect-ratio: 2560/1440) { … } 

     

    color**

    ใช้ตรวจสอบ การแสดงสีของอุปรณ์นั้นๆ (Bits per Pixel) หากเป็นอุปกรณ์ ที่ไม่ได้แสดงผลเป็นสี ค่าจะกลายเป็น 0

     

    monochrome**

    ใช้ตรวจสอบอุปกรณ์ขาวดำ (Bits per Pixel) หากเป็นอุปกรณ์ที่แสดงผลแบบสี ค่าจะกลายเป็น 0

     

    ตัวอย่างการเขียนตรวจสอบ color และ monochrome

     

     @media all and (color) { … } @media all and (min-color: 1) { … } @media all and (monochrome) { … } @media all and (min-monochrome: 1) { … } 

     <link rel="stylesheet" media="print and (color)" href="http://…" />   <link rel="stylesheet" media="print and (monochrome)" href="http://…" /> 

     

    resolution**

    ใช้ตรวจสอบความระเอียดของ ภาพ Bitmap ที่แสดงบนอุปกรณ์นั้นๆ

     

    ตัวอย่างการเขียนตรวจสอบ color และ monochrome

     

     @media print and (min-resolution: 300dpi) { … } 

    ตัวอย่างการใช้งาน Media Queries

     

    **เราสามารถใช้ prefix “min” และ “max” ในการระบุค่าลงไปนะครับ และค่าทุกค่าต้องเป็นจำนวนจริงไม่มีติดลบครับ เช่น “max-width: -700px” แบบนี้ไม่ได้นะครับ

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

บทความที่น่าสนใจ

บทความ ล่าสุด

บทความ ความรู้ด้านไอที, คอมพิวเตอร์ Techonlogy, Gadget, ความรู้เกี่ยวกับคอมพิวเตอร์ กับทาง SoftMelt.com