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>
Code: Select all
<style>
body {
font-size: 36px;
}
</style>
Code: Select all
@media screen and (max-width:480px){
body {
background-color: #66ffcc;
}
}
** สรุปความเข้าใจง่ายๆนะค่ะ มันเหมือนกับเรา fix คุณสมบัติของ Class CSS ตามขนาดที่เรากำหนด ว่าถ้าขนาด 480 px เราจะใช้คุณสมบัติของ Class นั้นๆ เเทนค่ะ **