CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย
Moderator: mindphp, ผู้ดูแลกระดาน
-
thatsawan
- PHP VIP Members
- โพสต์: 28508
- ลงทะเบียนเมื่อ: 31/03/2014 10:02 am
-
ติดต่อ:
โพสต์ที่ยังไม่ได้อ่าน
โดย 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 (119.06 KiB) Viewed 2276 times
คำอธิบาย :
โค้ด: เลือกทั้งหมด
<style>
body {
font-size: 36px;
}
</style>
ก็คือ เมื่อเข้าสู่หน้าจอการทำงาน ข้อความอยู่ใน Tag จะมีขนาดตัวอักษร เท่ากับ 36px จะยังไม่มีการกำหนดขนาดของหน้าจอ หมายถึง คำสั่งนี้จะใช้งานได้ทุกขนาดหน้าจอค่ะ ดังภาพตัวอย่างที่ 1
- 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 (66.56 KiB) Viewed 2276 times
ในส่วนนี้นะค่ะมันหมายถึงว่า เมื่อใดก็ตามที่เราปรับขนาดของหน้าจอ อยู่ในช่วง 480 px ก็จะเรียกใช้คำสั่งที่นี้เเทนค่ะ จะไม่ใช้คำสั่งของภาพที่ 1 เเล้ว
- 2015-01-18_12-12-10.png (70.76 KiB) Viewed 2276 times
สังเกตุว่ามันเช็ตจากขนาดตัวหน้านะค่ะ
- 2015-01-18_11-55-34.png (35.22 KiB) Viewed 2276 times
เช่นเดียวกันในตัวอย่างที่ 3 จะมีการทำงานเหมือนกับตัวอย่างที่ 2 เลยค่ะ
** สรุปความเข้าใจง่ายๆนะค่ะ มันเหมือนกับเรา fix คุณสมบัติของ Class CSS ตามขนาดที่เรากำหนด ว่าถ้าขนาด 480 px เราจะใช้คุณสมบัติของ Class นั้นๆ เเทนค่ะ **
-
-
- 1 ตอบกลับ
- 753 แสดง
-
โพสต์ล่าสุด โดย mindphp
19/01/2023 9:55 pm
-
-
- 0 ตอบกลับ
- 1524 แสดง
-
โพสต์ล่าสุด โดย thatsawan
10/01/2015 5:35 am
-
-
- 0 ตอบกลับ
- 4173 แสดง
-
โพสต์ล่าสุด โดย jamepiyawat
10/08/2019 5:07 pm
-
-
- 2 ตอบกลับ
- 2283 แสดง
-
โพสต์ล่าสุด โดย Before Dong
22/07/2017 6:53 pm
-
-
- 2 ตอบกลับ
- 2226 แสดง
-
โพสต์ล่าสุด โดย jamepiyawat
05/09/2019 3:26 pm
สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 70