手機(jī)訪問原圖

自己設(shè)計出來的

美工字體效果差距太大,只是簡單看看結(jié)構(gòu)吧.

整體頁面結(jié)構(gòu)說明

分別引入iconfont,reset,和分結(jié)構(gòu)的CSS.body分為三部分獨立完成

其中注意在reset設(shè)置好隨手機(jī)端變化的自適應(yīng)rem并通過媒體查詢確保rem不至于太小或太大,代碼如下:

html {
  font-size: calc(100vw / 3.75);
}
body {
  font-size: 0.16rem;
  }
@media (max-width: 320px) {
  html {
    font-size: 85px;
  }
}
@media (min-width: 640px) {
  html {
    font-size: 170px;
  }
}

過程細(xì)節(jié)說明

1. html來分層一層一層來推進(jìn),寫了大結(jié)構(gòu)后,完成一層細(xì)節(jié)后再進(jìn)入下一層,如header內(nèi)容
   

2.css代碼是關(guān)鍵,一是注意樣式屬性的逐層選擇,也就是子層樣式寫的時候把父層的選擇器直接復(fù)制過來,再加子層項

3.活用flex和grid布局,比如

.兩元素同組上下兩行居中對齊 {
    display: grid;
    place-items: center;
}
.兩元素同組同行左右兩端對齊 {
    display: grid;
    grid-template-columns: 1fr 0.6rem;
    place-content: space-between;
}
.幾元素分散導(dǎo)航{
    display: flex;
    place-content: space-around;
}