ລາຍການຫົວເລື່ອງ
CSS ຕອບສະຫນອງມືຖືສະແດງຮູບແບບການຕອບສະຫນອງຫນ້າຈໍ @media ທີ່ແຕກຕ່າງກັນຕາມຄວາມລະອຽດທີ່ແຕກຕ່າງກັນແນວໃດ?
ບົດຄວາມຕໍ່ໄປນີ້ຈະແນະນໍາວິທີການນໍາໃຊ້ CSS ເພື່ອກໍານົດຄວາມລະອຽດທີ່ແຕກຕ່າງກັນແລະສະແດງຮູບແບບຄວາມກວ້າງທີ່ແຕກຕ່າງກັນເພື່ອບັນລຸຄວາມກວ້າງຂອງການປັບຕົວ.
ເພື່ອນໆທີ່ຕ້ອງການສາມາດອ້າງເຖິງມັນໄດ້, ຂ້າພະເຈົ້າຫວັງວ່າມັນຈະເປັນປະໂຫຍດກັບທຸກຄົນ.
ຄວາມແຕກຕ່າງລະຫວ່າງໜ້າເວັບການພິມໜ້າຈໍ @media ແລະ @media
- ຖ້າຕ້ອງການໃຊ້ css ໃນອຸປະກອນການພິມ, ໃຫ້ໃຊ້ @media, ຖ້າບໍ່ດັ່ງນັ້ນ, ໃຫ້ໃຊ້ @media screen.
- ຢ່າງໃດກໍຕາມ, ນີ້ບໍ່ຈໍາເປັນຕ້ອງເປັນຄວາມຈິງ, ໃນຄວາມເປັນຈິງ, ຖ້າທ່ານປ່ຽນ "ຫນ້າຈໍ" ດ້ວຍ "ພິມ" ແລະຂຽນເປັນ @media print, ຫຼັງຈາກນັ້ນ CSS ສາມາດນໍາໃຊ້ໃນອຸປະກອນການພິມ;
- ແຕ່ສັງເກດວ່າ css ປະກາດໂດຍ @media print ແມ່ນໃຊ້ໄດ້ໃນອຸປະກອນການພິມເທົ່ານັ້ນ.
1. DIVCSS ລາຍລະອຽດກໍລະນີນ້ອຍ
ພວກເຮົາທໍາອິດກໍານົດກ່ອງ DIV CSS ທີ່ມີຊື່ວ່າ ".abc", ກໍານົດຄວາມສູງຂອງມັນເປັນ 300px, ແລະກໍານົດຂອບເຂດ CSS ເປັນສີດໍາ;
- ແລະການຕັ້ງຄ່າ
margin:0 autoການຈັດວາງແມ່ນຢູ່ໃຈກາງ, ແລະທັງສອງຮູບແບບນີ້ແມ່ນຖືກຕັ້ງໄວ້ລ່ວງໜ້າເພື່ອໃຫ້ເບິ່ງງ່າຍ.
ພວກເຮົາລາກຕົວທ່ອງເວັບດ້ວຍຕົນເອງເພື່ອສະແດງຄວາມກວ້າງ, ແລະຫຼັງຈາກນັ້ນສັງເກດເຫັນວ່າຄວາມກວ້າງຂອງກ່ອງປ່ຽນແປງແນວໃດ:
- ເມື່ອຄວາມກວ້າງຂອງຕົວທ່ອງເວັບຖືກປັບເປັນຄວາມກວ້າງບໍ່ເກີນ 500px, 100px ຖືກສະແດງທີ່ສອດຄ້ອງກັບຄວາມກວ້າງຂອງກ່ອງ;
- ເມື່ອຄວາມກວ້າງຂອງຕົວທ່ອງເວັບຖືກປັບໃຫ້ຫນ້ອຍກວ່າ 901px, ".abc" ຈະຖືກສະແດງທີ່ສອດຄ້ອງກັບຄວາມກວ້າງຂອງກ່ອງ, ເຊິ່ງສະແດງ 200px;
- ເມື່ອຄວາມກວ້າງຂອງຕົວທ່ອງເວັບຖືກປັບໃຫ້ໃຫຍ່ກວ່າ 1201px, ຄວາມກວ້າງຂອງວັດຖຸກ່ອງຈະສະແດງ 1200px;
- ເມື່ອມັນຫນ້ອຍກວ່າ 1200px, ຄວາມກວ້າງຂອງຈໍສະແດງຜົນແມ່ນ 900px.
2, CSS mobile terminal 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>ໝາຍເຫດ: ອັດຕາສ່ວນອຸປະກອນ
- ອັດຕາສ່ວນອຸປະກອນສາມາດຖືກນໍາໃຊ້ເພື່ອໃຫ້ເຫມາະສົມກັບອຸປະກອນທີ່ມີອັດຕາສ່ວນຫນ້າຈໍສະເພາະ, ເຊິ່ງເປັນຄຸນສົມບັດທີ່ເປັນປະໂຫຍດ.
- ຕົວຢ່າງ, ຫນ້າຂອງພວກເຮົາຕ້ອງການກໍານົດຮູບແບບສໍາລັບຫນ້າຈໍປົກກະຕິທີ່ມີອັດຕາສ່ວນ 4: 3.
- ຈາກນັ້ນສຳລັບ 16:9 ແລະ 16:10 ຈໍກວ້າງ, ກຳນົດຮູບແບບອື່ນ, ເຊັ່ນ: ຄວາມກວ້າງປັບໄດ້ ແລະ ຄວາມກວ້າງຄົງທີ່:
- @media ພຽງແຕ່ຫນ້າຈໍແລະ (device-aspect-ratio: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 ທີ່ແຕກຕ່າງກັນຕອບສະຫນອງເນື້ອໃນລາຍລະອຽດຕາມຫນ້າຈໍທີ່ແຕກຕ່າງກັນ.
ຫວັງ Chen Weiliang Blog ( https://www.chenweiliang.com/ .
ຍິນດີຕ້ອນຮັບແບ່ງປັນການເຊື່ອມຕໍ່ຂອງບົດຄວາມນີ້:https://www.chenweiliang.com/cwl-2074.html
ຍິນດີຕ້ອນຮັບສູ່ຊ່ອງ Telegram ຂອງບລັອກຂອງ Chen Weiliang ເພື່ອຮັບອັບເດດຫຼ້າສຸດ!
📚ຄູ່ມືນີ້ມີຄຸນຄ່າອັນມະຫາສານ, 🌟ນີ້ເປັນໂອກາດທີ່ຫາຍາກ, ຢ່າພາດມັນ! ⏰⌛💨
Share and like ຖ້າມັກ!
ການແບ່ງປັນແລະການຖືກໃຈຂອງທ່ານແມ່ນການຊຸກຍູ້ຢ່າງຕໍ່ເນື່ອງຂອງພວກເຮົາ!