បញ្ជីអត្ថបទ
តើ CSS ឆ្លើយតបតាមទូរសព្ទចល័តបង្ហាញប្លង់ឆ្លើយតបអេក្រង់ @media ខុសៗគ្នាដោយរបៀបណា?
អត្ថបទខាងក្រោមនឹងណែនាំពីរបៀបប្រើ CSS ដើម្បីកំណត់ដំណោះស្រាយផ្សេងៗ និងបង្ហាញប្លង់ទទឹងខុសៗគ្នា ដើម្បីសម្រេចបានទទឹងប្រែប្រួល។
មិត្តដែលត្រូវការអាចយោងទៅវាបាន ខ្ញុំសង្ឃឹមថាវានឹងមានប្រយោជន៍ដល់អ្នកទាំងអស់គ្នា។
ភាពខុសគ្នារវាងគេហទំព័របោះពុម្ពអេក្រង់ @media និង @media
- ប្រសិនបើ css ត្រូវការប្រើក្នុងឧបករណ៍បោះពុម្ព សូមប្រើ @media បើមិនដូច្នេះទេ សូមប្រើអេក្រង់ @media ។
- ទោះយ៉ាងណាក៏ដោយ នេះមិនមែនជាការពិតទេ។ តាមពិត ប្រសិនបើអ្នកជំនួស "អេក្រង់" ដោយ "បោះពុម្ព" ហើយសរសេរវាជា @media print នោះ CSS អាចត្រូវបានប្រើនៅលើឧបករណ៍បោះពុម្ព។
- ប៉ុន្តែសូមចំណាំថា css ដែលប្រកាសដោយ @media print មានសុពលភាពតែលើឧបករណ៍បោះពុម្ពប៉ុណ្ណោះ។
1. ការពិពណ៌នាករណីតូច DIVCSS
ដំបូងយើងកំណត់ប្រអប់ DIV ដែលមានឈ្មោះថា ".abc" កំណត់កម្ពស់របស់វាទៅ 300px ហើយកំណត់ស៊ុម CSS ទៅជាពណ៌ខ្មៅ។
- និងការកំណត់
margin:0 autoប្លង់គឺស្ថិតនៅចំកណ្តាល ហើយរចនាប័ទ្មទាំងពីរនេះត្រូវបានកំណត់ជាមុនដើម្បីងាយស្រួលមើល។
យើងអូសកម្មវិធីរុករកដោយដៃដើម្បីបង្ហាញទទឹង ហើយបន្ទាប់មកមើលពីរបៀបដែលទទឹងរបស់ប្រអប់ផ្លាស់ប្តូរ៖
- នៅពេលដែលទទឹងនៃកម្មវិធីរុករកត្រូវបានលៃតម្រូវទៅទទឹងមិនលើសពី 500px នោះ 100px ត្រូវបានបង្ហាញដែលត្រូវគ្នាទៅនឹងទទឹងនៃប្រអប់។
- នៅពេលដែលទទឹងនៃកម្មវិធីរុករកត្រូវបានកែតម្រូវឱ្យតិចជាង 901px ".abc" ត្រូវបានបង្ហាញដែលត្រូវគ្នាទៅនឹងទទឹងនៃប្រអប់ដែលបង្ហាញ 200px;
- នៅពេលដែលទទឹងកម្មវិធីរុករកត្រូវបានកែតម្រូវឱ្យធំជាង 1201px ទទឹងរបស់វត្ថុប្រអប់បង្ហាញ 1200px;
- នៅពេលដែលវាតូចជាង 1200px ទទឹងបង្ហាញគឺ 900px។
2, CSS mobile phone terminal code adaptive code
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
/* css注释：设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */
@media screen and (max-width: 901px) {
.abc {width: 200px;}
}
/* 设置了浏览器宽度不大于901px时 abc 显示200px宽度 */
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */- គួរកត់សម្គាល់ថាលំដាប់កូដ CSS គឺវាយអក្សរ CSS ពីធំទៅតូច (វិនិច្ឆ័យថាទទឹងកម្មវិធីរុករកធំជាង ផ្នែកខាងមុខកាន់តែខ្ពស់)។
- នេះគឺដោយសារតែទំនាក់ទំនងឡូជីខល ការវិនិច្ឆ័យរបស់ @media លើការកែកំហុស CSS នឹងធ្វើឱ្យការវិនិច្ឆ័យបរាជ័យ។
3. កូដ HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
/* 设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */
@media screen and (max-width: 900px) {
.abc {width: 200px;}
}
/* 设置了浏览器宽度不大于900px时 abc 显示200px宽度 */
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */
</style>
</head>
<body>
<div class="abc">DIVCSS5实例：我这个DIV宽度会随浏览器宽度变化哦，试试改变浏览器宽度</div>
</body>
</html>ចំណាំ៖ សមាមាត្រឧបករណ៍-ទិដ្ឋភាព
- device-aspect-ratio អាចត្រូវបានប្រើដើម្បីឲ្យសមនឹងឧបករណ៍ដែលមានសមាមាត្រអេក្រង់ជាក់លាក់ ដែលក៏ជាលក្ខណៈសម្បត្តិដ៏មានប្រយោជន៍ផងដែរ។
- ឧទាហរណ៍ ទំព័ររបស់យើងចង់កំណត់រចនាប័ទ្មសម្រាប់អេក្រង់ធម្មតាដែលមានសមាមាត្រ 4:3 ។
- បន្ទាប់មកសម្រាប់ 16:9 និង 16:10 widescreen កំណត់រចនាប័ទ្មផ្សេងទៀត ដូចជាទទឹងអាដាប់ធ័រ និងទទឹងថេរ៖
- @media តែអេក្រង់ និង (សមាមាត្រឧបករណ៍៖ 4/3)
4. ឆបគ្នាជាមួយកម្មវិធីរុករកធំៗ HTML+CSS+JS កូដប្រភព
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
@media screen and (max-width: 900px) {
.abc {width: 200px;}
}
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
</style>
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>
<body>
<div class="abc">DIV宽度会随浏览器宽度变化哦，改变浏览器宽度</div>
</body>
</html>ខាងលើគឺជា CSS adaptive terminal ចល័ត ដែលបង្ហាញអេក្រង់ @media ផ្សេងគ្នាដែលឆ្លើយតបនឹងមាតិកាលម្អិតយោងទៅតាមអេក្រង់ផ្សេងគ្នា។
Hope Chen Weiliang Blog ( https://www.chenweiliang.com/ ) បានចែករំលែក "Mobile Adaptive CSS Different Screens Display Different @media Screen Responsiveness" ដែលមានប្រយោជន៍សម្រាប់អ្នក។
សូមស្វាគមន៍ចំពោះការចែករំលែកតំណភ្ជាប់នៃអត្ថបទនេះ៖https://www.chenweiliang.com/cwl-2074.html
សូមស្វាគមន៍មកកាន់ឆានែល Telegram នៃប្លុករបស់ Chen Weiliang ដើម្បីទទួលបានព័ត៌មានថ្មីៗចុងក្រោយបង្អស់!
📚 មគ្គុទ្ទេសក៍នេះមានតម្លៃមហាសាល 🌟នេះជាឱកាសដ៏កម្រ សូមកុំអូសរំលង! ⏰⌛💨
Share និង Like ប្រសិនបើអ្នកចូលចិត្ត!
ការចែករំលែក និងការចូលចិត្តរបស់អ្នកគឺជាការលើកទឹកចិត្តបន្តរបស់យើង!