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

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

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

User avatar
thatsawan
PHP VIP Members
PHP VIP Members
Posts: 24520
Joined: 31/03/2014 10:02 am
Contact:

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

Post by thatsawan »

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

Code: Select all

<!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 1466 times
คำอธิบาย :

Code: Select all

<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 1466 times
คำอธิบาย :

Code: Select all

 @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 1466 times
ในส่วนนี้นะค่ะมันหมายถึงว่า เมื่อใดก็ตามที่เราปรับขนาดของหน้าจอ อยู่ในช่วง 480 px ก็จะเรียกใช้คำสั่งที่นี้เเทนค่ะ จะไม่ใช้คำสั่งของภาพที่ 1 เเล้ว
2015-01-18_12-12-10.png
2015-01-18_12-12-10.png (70.76 KiB) Viewed 1466 times
สังเกตุว่ามันเช็ตจากขนาดตัวหน้านะค่ะ
2015-01-18_11-55-34.png
2015-01-18_11-55-34.png (35.22 KiB) Viewed 1466 times
เช่นเดียวกันในตัวอย่างที่ 3 จะมีการทำงานเหมือนกับตัวอย่างที่ 2 เลยค่ะ

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

  • Similar Topics
    Replies
    Views
    Last post

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 5 guests