CSS3:การใช้งาน @media screen กำหนดคุณสมบัติ Class แบบ responsive

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

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
thatsawan
PHP VIP Members
PHP VIP Members
โพสต์: 28508
ลงทะเบียนเมื่อ: 31/03/2014 10:02 am
ติดต่อ:

CSS3:การใช้งาน @media screen กำหนดคุณสมบัติ Class แบบ responsive

โพสต์ที่ยังไม่ได้อ่าน โดย thatsawan »

บทความนี้เป็นตัวอย่างวิธีหนึ่งในการ พัฒนา CSS Responsive จากคร่าวก่อนที่ได้เเนะการใช้งานเครื่องมือสำหรับการ "เช็คการทำงานของ CSS Responsive ว่าขนาดหน้าจอที่เเสดงใช้ Class ใหนอยู่" เเต่ในครั้งนี้เราจะมาลองเขียน Code CSS ในเเบบของ Responsive กันค่ะ

โค้ด: เลือกทั้งหมด

<!DOCTYPE html>
<html>
    <head>
        <title> CSS </title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            body {
                font-size: 36px;
            }
            @media screen and (max-width:480px){
               body {
                   background-color: #66ffcc;
                } 
            }
            @media screen and (max-width:252px){
               body {
                  display: none;
                } 
            }
        </style>
    </head>
        <body>
            <div>ตัวอย่าง</div>
            <div id="mindphp">Mindphp.com</div>
            <div class="classmindphp">ข้อความที่อยู่ใน class mindphp Mindphp.com</div>
            <p class="classmindphp"> ข้อความที่อยู่ใน classmindphp Tag p </p>
        </body>
</html>
2015-01-18_11-52-38.png
2015-01-18_11-52-38.png (119.06 KiB) Viewed 2276 times
คำอธิบาย :

โค้ด: เลือกทั้งหมด

<style>
            body {
                font-size: 36px;
            }
</style>
ก็คือ เมื่อเข้าสู่หน้าจอการทำงาน ข้อความอยู่ใน Tag จะมีขนาดตัวอักษร เท่ากับ 36px จะยังไม่มีการกำหนดขนาดของหน้าจอ หมายถึง คำสั่งนี้จะใช้งานได้ทุกขนาดหน้าจอค่ะ ดังภาพตัวอย่างที่ 1
2015-01-18_11-52-00.png
2015-01-18_11-52-00.png (85.46 KiB) Viewed 2276 times
คำอธิบาย :

โค้ด: เลือกทั้งหมด

 @media screen and (max-width:480px){
               body {
                   background-color: #66ffcc;
                } 
            }
2015-01-18_11-54-47.png
2015-01-18_11-54-47.png (66.56 KiB) Viewed 2276 times
ในส่วนนี้นะค่ะมันหมายถึงว่า เมื่อใดก็ตามที่เราปรับขนาดของหน้าจอ อยู่ในช่วง 480 px ก็จะเรียกใช้คำสั่งที่นี้เเทนค่ะ จะไม่ใช้คำสั่งของภาพที่ 1 เเล้ว
2015-01-18_12-12-10.png
2015-01-18_12-12-10.png (70.76 KiB) Viewed 2276 times
สังเกตุว่ามันเช็ตจากขนาดตัวหน้านะค่ะ
2015-01-18_11-55-34.png
2015-01-18_11-55-34.png (35.22 KiB) Viewed 2276 times
เช่นเดียวกันในตัวอย่างที่ 3 จะมีการทำงานเหมือนกับตัวอย่างที่ 2 เลยค่ะ

** สรุปความเข้าใจง่ายๆนะค่ะ มันเหมือนกับเรา fix คุณสมบัติของ Class CSS ตามขนาดที่เรากำหนด ว่าถ้าขนาด 480 px เราจะใช้คุณสมบัติของ Class นั้นๆ เเทนค่ะ **
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 70