โดย thatsawan » 18/01/2015 12:18 pm
บทความนี้เป็นตัวอย่างวิธีหนึ่งในการ พัฒนา 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 2287 times
คำอธิบาย :
โค้ด: เลือกทั้งหมด
<style>
body {
font-size: 36px;
}
</style>
ก็คือ เมื่อเข้าสู่หน้าจอการทำงาน ข้อความอยู่ใน Tag จะมีขนาดตัวอักษร เท่ากับ 36px จะยังไม่มีการกำหนดขนาดของหน้าจอ หมายถึง คำสั่งนี้จะใช้งานได้ทุกขนาดหน้าจอค่ะ ดังภาพตัวอย่างที่ 1
- 2015-01-18_11-52-00.png (85.46 KiB) Viewed 2287 times
คำอธิบาย :
โค้ด: เลือกทั้งหมด
@media screen and (max-width:480px){
body {
background-color: #66ffcc;
}
}
- 2015-01-18_11-54-47.png (66.56 KiB) Viewed 2287 times
ในส่วนนี้นะค่ะมันหมายถึงว่า เมื่อใดก็ตามที่เราปรับขนาดของหน้าจอ อยู่ในช่วง 480 px ก็จะเรียกใช้คำสั่งที่นี้เเทนค่ะ จะไม่ใช้คำสั่งของภาพที่ 1 เเล้ว
- 2015-01-18_12-12-10.png (70.76 KiB) Viewed 2287 times
สังเกตุว่ามันเช็ตจากขนาดตัวหน้านะค่ะ
- 2015-01-18_11-55-34.png (35.22 KiB) Viewed 2287 times
เช่นเดียวกันในตัวอย่างที่ 3 จะมีการทำงานเหมือนกับตัวอย่างที่ 2 เลยค่ะ
** สรุปความเข้าใจง่ายๆนะค่ะ มันเหมือนกับเรา fix คุณสมบัติของ Class CSS ตามขนาดที่เรากำหนด ว่าถ้าขนาด 480 px เราจะใช้คุณสมบัติของ Class นั้นๆ เเทนค่ะ **
[color=#0040FF]บทความนี้เป็นตัวอย่างวิธีหนึ่งในการ พัฒนา CSS Responsive จากคร่าวก่อนที่ได้เเนะการใช้งานเครื่องมือสำหรับการ [url=https://www.mindphp.com/forums/viewtopic.php?f=73&t=25387]"เช็คการทำงานของ CSS Responsive ว่าขนาดหน้าจอที่เเสดงใช้ Class ใหนอยู่"[/url] เเต่ในครั้งนี้เราจะมาลองเขียน Code CSS ในเเบบของ Responsive กันค่ะ[/color]
[code]<!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>
[/code]
[attachment=3]2015-01-18_11-52-38.png[/attachment]
คำอธิบาย :
[code]<style>
body {
font-size: 36px;
}
</style>[/code]
[color=#0040FF]ก็คือ เมื่อเข้าสู่หน้าจอการทำงาน ข้อความอยู่ใน Tag จะมีขนาดตัวอักษร เท่ากับ 36px จะยังไม่มีการกำหนดขนาดของหน้าจอ หมายถึง คำสั่งนี้จะใช้งานได้ทุกขนาดหน้าจอค่ะ ดังภาพตัวอย่างที่ 1[/color]
[attachment=4]2015-01-18_11-52-00.png[/attachment]
คำอธิบาย :
[code] @media screen and (max-width:480px){
body {
background-color: #66ffcc;
}
}[/code]
[attachment=2]2015-01-18_11-54-47.png[/attachment]
[color=#0040FF]ในส่วนนี้นะค่ะมันหมายถึงว่า เมื่อใดก็ตามที่เราปรับขนาดของหน้าจอ อยู่ในช่วง 480 px ก็จะเรียกใช้คำสั่งที่นี้เเทนค่ะ จะไม่ใช้คำสั่งของภาพที่ 1 เเล้ว[/color]
[attachment=0]2015-01-18_12-12-10.png[/attachment]
[color=#0040FF]สังเกตุว่ามันเช็ตจากขนาดตัวหน้านะค่ะ[/color]
[attachment=1]2015-01-18_11-55-34.png[/attachment]
[color=#0040FF]เช่นเดียวกันในตัวอย่างที่ 3 จะมีการทำงานเหมือนกับตัวอย่างที่ 2 เลยค่ะ[/color]
[i][color=#FF0000]** สรุปความเข้าใจง่ายๆนะค่ะ มันเหมือนกับเรา fix คุณสมบัติของ Class CSS ตามขนาดที่เรากำหนด ว่าถ้าขนาด 480 px เราจะใช้คุณสมบัติของ Class นั้นๆ เเทนค่ะ **[/color][/i]