ການອອກແບບເວັບໄຊປະຕິບັດການ - ການຊອກຫາສະແດງ

ຫຍັງຈະເປັນພະລັງຖານສາຍສາພາບ?:

ພະລັງຖານສາຍສາພາບ ແມ່ນສິ່ງທີ່ຖືກເພີ່ມເຂົ້າໃນ CSS3:

ຈະນຳໃຊ້ພຽງແຕ່ເມື່ອພົບກັບບັນດາເງື່ອນໄຂພິເສດ: @media ກົດລະບຽບເພື່ອຫານວັດທະນະບາຍ CSS:

ຄວາມຄົງຈຳນວນ

ຖ້າປ່ອງວິດໂລມີເລິກສາຍລະບາຍ 600px ຫຼືຫຼາຍກວ່າ, ສີການກະດູກຈະເປັນສີສະຫຼາດ:

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

亲自试一试

ເພີ່ມພະລັງຖານລະບາຍ:

ໃນການສອນນີ້ຫຼາຍກ່ອນ, ພວກເຮົາໄດ້ສ້າງໜ້າເວັບໄຊທີ່ມີຈຸດມາດ ແລະ ສາຍ, ແຕ່ໜ້າເວັບໄຊສະແດງສະໜາມຢູ່ສະໜາມຂະໜາດນ້ອຍບໍ່ດີ:

ພະລັງຖານລະບາຍສາຍສາພາບຈະຊ່ວຍທ່ານ. ພວກເຮົາສາມາດເພີ່ມພະລັງຖານລະບາຍລະບົບລະບາຍ, ທີ່ບາງສ່ວນຂອງການອອກແບບຈະສະແດງຕົວຢູ່ທາງທັງສອງຂ້າງຂອງພະລັງຖານລະບາຍ:


ຄອມພິວເຕີຕະຫຼາດ

ສາຍວິດີໂອ

ເພີ່ມພະລັງຖານລະບາຍທີ່ 768px:

ຄວາມຄົງຈຳນວນ

ເມື່ອເວລາມີເລິກສາຍລະບາຍຫຼາຍກວ່າ 768px, ວັດທະນະບາຍຂອງເສັ້ນກາງຄວນເປັນ 100％:

/* ສຳລັບອຸປະກອນຕະຫຼາດ: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@media only screen and (max-width: 768px) {
  /* ສຳລັບໂທລະສັບ: */
  [class*="col-"] {
    width: 100%;
  }
}

亲自试一试

ຕະຫຼາດສະແດງສາຍວິດໂອມາກ່ອນຈົນເຖິງ:

ສະແດງສາຍວິດໂອມາກ່ອນ (Mobile First) ຄວນຈະກ່າວວ່າ ກ່ອນທີ່ຈະອອກແບບສຳລັບຄອມພິວເຕີຕະຫຼາດ ຫຼື ອຸປະກອນອື່ນໆໃດ, ພວກເຮົາຄວນອອກແບບສຳລັບອຸປະກອນສາຍວິດໂອ (ນັ້ນຈະເຮັດໃຫ້ໜ້າເວັບໄຊສະແດງສະໜາມຢູ່ອຸປະກອນຂະໜາດນ້ອຍໄວວາ):

ນີ້ຄວນຈະຈະມີການປັບປຸງໃນ CSS:

ເມື່ອເວລາມີເລິກສາຍລະບາຍຫຼາຍກວ່າ 768px ພວກເຮົາຄວນປ່ຽນການອອກແບບພາຍໃນບໍ່ການປ່ຽນເວລາມີເລິກສາຍລະບາຍ. ພວກເຮົາໄດ້ເຮັດການອອກແບບ 'ສະແດງສາຍວິດໂອມາກ່ອນ':

ຄວາມຄົງຈຳນວນ

/* ສຳລັບໂທລະສັບ: */
[class*="col-"] {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  /* ສຳລັບຄອມພິວເຕີບ: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

亲自试一试

ພະລັງຖານລະບາຍລະບົບລະບາຍອື່ນໆ:

ທ່ານສາມາດເພີ່ມພະລັງຖານລະບາຍລະບົບລະບາຍຫຼາຍຫຼາຍບ່ອນ:

ພວກເຮົາຈະເພີ່ມພະລັງຖານລະບາຍລະບົບລະບາຍທີ່ຢູ່ລະບົບສະແດງສາຍວິດໂອ ແລະ ສາຍວິດໂອ:


ຄອມພິວເຕີຕະຫຼາດ

ແມ່ນອຸປະກອນສະແດງ

ສາຍວິດີໂອ

ສຳລັບນັ້ນແລ້ວພວກເຮົາໄດ້ເພີ່ມຂໍ້ສອບສວນສາຍສາພາບ (ທີ່ 600 ມັນຕະລັງ), ແລະໄດ້ເພີ່ມບັນດາຫົວໜ່ວຍໃຫມ່ ສຳລັບອຸປະກອນທີ່ມີມາດຕະລາງຫຼາຍກວ່າ 600 ມັນຕະລາງ ແຕ່ຍັງບໍ່ຫຼາຍກວ່າ 768 ມັນຕະລາງ:

ຄວາມຄົງຈຳນວນ

ເບິ່ງຄືວ່າສອງກຸ່ມນະໂຍບາຍບໍ່ມີຄວາມແຕກຕ່າງ, ສິ່ງອື່ນທີ່ຕ່າງກັນພຽງແຕ່ຊື່ (col- ແລະ col-s-):

/* ສຳລັບໂທລະສັບ: */
[class*="col-"] {
  width: 100%;
}
@media only screen and (min-width: 600px) {
  /* ສຳລັບຄອມພິວເຕີບບັບ: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
  /* ສຳລັບຄອມພິວເຕີບ: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

ມີສອງກຸ່ມນະໂຍບາຍທີ່ຄິດວ່າບໍ່ຫນ້າຜົນ, ແຕ່ມັນເຮັດໃຫ້ພວກເຮົາມີໂອກາດໃຊ້ HTML ເພື່ອຕັດສິນໃຈວ່າການຕັ້ງວັດຖຸຈະເກີດຫນື່ງໃນແຕ່ລະບາດການແຍກກະພິບ:

ຄວາມຈຳນວນ HTML

ສຳລັບຄອມພິວເຕີບວາງອອກ:

ການສະບັບທີ່ 1 ແລະ 3 ຈະຂ້າມ 3 ການຕັ້ງວັດຖຸ. ການສະບັບກາງ ຈະຂ້າມ 6 ການຕັ້ງວັດຖຸ:

ສຳລັບຄອມພິວເຕີບ:

ການສະບັບທີ່ 1 ຈະຂ້າມ 3 ການຕັ້ງວັດຖຸ, ການສະບັບທີ່ 2 ຈະຂ້າມ 9 ການຕັ້ງວັດຖຸ, ການສະບັບທີ່ 3 ຈະສະແດງຢູ່ລຸ່ມການສະບັບທີ່ 1 ແລະ 2 ແລະ ຈະຂ້າມ 12 ການຕັ້ງວັດຖຸ:

<div class="row">
  
...

  
...

  
...

亲自试一试

典型的设备断点

高度和宽度不同的屏幕和设备不计其数，因此很难为每个设备创建精确的断点。为了简单起见，您可以瞄准这五组：

ຄວາມຄົງຈຳນວນ

/* ອຸປະກອນຂະໜາດນ້ອຍຫຼືຫຼາຍ (ໂທລະສັບ, 600px ຫຼືຫຼາຍກວ່າ) */
@media only screen and (max-width: 600px) {...} 
/* ອຸປະກອນຂະໜາດນ້ອຍ (ຄອບເຂົາທີ່ຕໍ່າກັນ, 600px ຫຼືຫຼາຍກວ່າ) */
@media only screen and (min-width: 600px) {...} 
/* ອຸປະກອນຂະໜາດມາດຕະຖານ (ຄອບເຂົາທີ່ຕໍ່າກັນ, 768px ຫຼືຫຼາຍກວ່າ) */
@media only screen and (min-width: 768px) {...} 
/* ອຸປະກອນຂະໜາດໃຫຍ່ (ຄອບເຂົາທີ່ໃຫຍ່ ແລະ ຄອບເຂົາທີ່ຕັ້ງຢູ່, 992px ຫຼືຫຼາຍກວ່າ) */
@media only screen and (min-width: 992px) {...} 
/* ອຸປະກອນຫຼາຍຂະໜາດ (ຄອບເຂົາທີ່ໃຫຍ່ ແລະ ຄອບເຂົາທີ່ຕັ້ງຢູ່, 1200px ຫຼືຫຼາຍກວ່າ) */
@media only screen and (min-width: 1200px) {...}

亲自试一试

ການກະຈາຍສະໝອງ: ຮູບພາບມະນຸດ / ຮູບພາບພູມສັນຕະວັດ

media query ກໍ່ສາມາດນຳໃຊ້ເພື່ອດັດແກ້ການຈັດການຂອງເວັບໄຊອີງຕາມການກະຈາຍສະໝອງຂອງປະຕິບັດສານສະແດງ.

ທ່ານສາມາດກະກຽມຂອງລະບົບ CSS ທີ່ຈະມີຜົນງານພຽງແຕ່ຖ້າເວລາຂອງປະຕິບັດສານສະແດງຈະໃຫຍ່ກວ່າຂະໜາດຂອງມັນ (ການກະຈາຍສະໝອງທີ່ຕໍ່າກັນ), ທີ່ຮູ້ວ່າ 'ການກະຈາຍສະໝອງຕໍ່າ':

ຄວາມຄົງຈຳນວນ

ຖ້າການກະຈາຍສະໝອງແມ່ນຮູບພາບທີ່ຕໍ່າກັນ (landscape mode)，ການປິດສະແດງບໍລິການຂອງເວັບໄຊຈະແຕ່ງໃຫ້ສີຫຼາຍຫຼືຫຼາຍກວ່ານັ້ນ:

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

亲自试一试

ການປິດສະແດງສະຖານະບັນດາທີ່ພິມສານສະແດງມູນວນ

ການນຳໃຊ້ຂອງ media query ເປັນການນຳໃຊ້ທີ່ຫຼາຍທີ່ສົມບູນໃນການປິດສະແດງສະຖານະບັນດາໃນຂະໜາດໜ້າຈໍານວນຫຼາຍກວ່ານັ້ນ:

ຄວາມຄົງຈຳນວນ

/* ຖ້າຂະໜາດໜ້າຈໍານວນ 600 ຄວາມຈໍານວນຕອນນ້ອຍຫຼືຫຼາຍກວ່ານັ້ນ，ການປິດສະແດງສະຖານະບັນດາ */
@media only screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

亲自试一试

ການດັດແກ້ຂອງ font-size ທີ່ພິມສານສະແດງມູນວນ

ທ່ານສາມາດນຳໃຊ້ການຄົ້ນຫາສານສະແດງມູນວນຂອງສັບສົນທີ່ພິມຂອງຕົວເລື່ອງທີ່ມີຂະໜາດໜ້າຈໍານວນຫຼາຍກວ່ານັ້ນຫຼືຫຼາຍກວ່ານັ້ນ:

ຄວາມຄົງຈຳນວນ

/* ຖ້າຂະໜາດໜ້າຈໍານວນ 601px ຫຼືຫຼາຍກວ່ານັ້ນ，ການກະກຽມ font-size ຂອງ <div> ຕ້ອງການແຕ່ງໃຫ້ 80px */
@media only screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
}
/* 如果屏幕尺寸为 600px 或更小，请将 
 的 font-size 设置为 30px */
@media only screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

亲自试一试

CSS @media 参考手册

有关所有媒体类型和特性/表达式的完整概述，请在 CSS 参考手册中参阅 @media 规则。