响应式网页设计 - 网格视图

什么是网格视图？

许多网页都基于网格视图（grid-view），这意味着页面被分割为几列：

在设计网页时，使用网格视图非常有帮助。这样可以更轻松地在页面上放置元素。

响应式网格视图通常有 12 列，总宽度为 100％，并且在调整浏览器窗口大小时会收缩和伸展。

အကျယ်အဝန်း အလိုက် အစား အရုပ် စံသုံး

ကျွန်တော်တို့ က အကျယ်အဝန်း အလိုက် အစား အရုပ် စံသုံး ကို တည်ဆောက်ခြင်း စတင်ပါ။

အပေါ်တွင် အတိုင်းအတာ အတွက် box-sizing အရာ သည် border-boxအဆိုပါ ဖော်ပြချက် သည် အရာဝတ္တု၏ အကျယ်အဝန်း နှင့် အမြင့် တွင် အဆိုပါ အကျယ်အဝန်း နှင့် အမြင့် ကို ပါဝင်စေသည်။

CSS တွင် အောက်ပါ ကို ထပ်ပေါင်းပါ။

* {
  box-sizing: border-box;
}

ကျွန်တော်တို့၏ စီစ်တိုက် Box Sizing box-sizing အရာ နှင့် ပတ်သက်၍ ပိုမိုသိရှိရန် သုံးစွဲနိုင်သော အချက်အလက် ကို ဘာသာစကား တစ်ခု တွင် ဖတ်ရှုပါ။

အောက်ပါ အမှတ်အသား သည် အကျယ်အဝန်း ၇၅% ရှိသော အကျယ်အဝန်း တစ်ခု ကို ပြသထားသည်။ ထို့အပြင် နှစ်လျှောက် စီးဆင်းသော အခြေအနေ တစ်ခု ပါဝင်သည်။

25%
75%

အမှတ်

.menu {
  width: 25%;
  float: left;
}
.main {
  width: 75%;
  float: left;
}

亲自试一试

若网页只包含两列，则上面的例子还不错。

မှာ ဝတ္ထု အတွင်း ၂ လုံး သာ ရှိ သော ဝတ္ထု အတွက် အပြင်အဆင် ကောင်းတာ ဖြစ်ပါတယ်:

ပထမပေါင်း တစ် လုံး က လုံး သည် အချိန် ကို အပြောင်းလဲပေးပါ တာ ကို သတိရှိပါ အခါ ၁၂ လုံး အတွက် ၁၀၀% / ၁၂ လုံး = ၈.၃၃%:

နောက်ပိုင်းတွင် ကျွန်တော်တို့ ၁၂ လုံး တွင် လုံး စလုံး အတွက် အမျိုးအစား တစ် ခု ဖွဲ့စည်းပါတယ်: class="col-" နှင့် အကြမ်း တစ် ကြောင်း ဖြင့် ထို အစိတ် အချုပ် က ဖြတ်သန့် လိမ့်မယ် ကို အသုံးပြုပါ:

CSS:

.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%;}

亲自试一试

အားလုံး သည် အရှေ့ဘက် အလှပ့် လျှင် ဖြစ် ပြီး ၁၅ ပမာဏ အတွင်းအဝ လျှင် ဖြစ်သည်:

CSS:

[class*="col-"] {
  float: left;
  padding: 15px;
  border: 1px solid red;
}

ရှေ့ဆောင် လျှင် လုံး ကို <div> တွင် အငွေ့ အဆောက် အရာ အတွင်း ရှိ အားလုံး သည် ၁၂ လုံး သာ ဖြစ်ပါ သတိရှိပါ:

HTML:

<div class="row">
  <div class="col-3">...</div> <!-- 25% -->
  <div class="col-9">...</div> <!-- 75% -->
</div>

အငွေ့ အဆောက် အရာ အတွင်း ရှိ အားလုံး သည် အရှေ့ဘက် အလှပ့် လျှင် သာ ဖြစ်ပါ ပြီး ကွင်း ဖြစ်သည့် အချိန် မှ သွားလျက် အခြား အရာများ ကို တည်ဆောက်ပေးသည် သတိရှိပါ အခါ ထိုသို့ အခြေအနေ ကို ကာကွယ်ရန် ကျွန်တော်တို့ ဖြစ်ပေါ်လာသည် အလှပ့် အော်ဒါ ပြုပြင်ပါတယ်:

CSS:

.row::after {
  content: "";
  clear: both;
  display: table;
}

ပြီးတော့ ကျွန်တော်တို့ အော်ဒါ နှင့် အရောင် အသစ် ထပ်ပေါင်းပါ က ပုံစံ အော်ဒါ အော်ဒါ ကို လူကြီးတုန့် ကြိုးပေးပါတယ်:

အမှတ်

html {
  font-family: "Lucida Sans", sans-serif;
}
.header {
  background-color: #9933cc;
  color: #ffffff;
  padding: 15px;
}
.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color :#33b5e5;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
  background-color: #0099cc;
}

亲自试一试

请注意，当您将浏览器窗口调整为非常小的宽度时，例中的网页看起来并不理想。在下一章中，您将学习如何解决这个问题。