賺點微信頁面外快的一點記錄

時間 2019-11-08

標籤微信頁面外快一點 1點記錄简体版

原文原文鏈接

最近作了個移動頁面的外包，寫下來，頁面佈局感受是比PC頁面簡單一點。css

不像PC頁面內容那麼多，並且PC端的瀏覽器比較多，這邊的話，我就考慮的比較少。html

最後在頁面寫完後本身整理了兩個小插件分別是彈出框zDialog和表單驗證zValidate。前端

1、640設計稿

1）如今比較流行的作法是按照iPhone 5的尺寸來設計css3

倍率2，邏輯像素320x568。看到的設計稿的寬度就是640的了，當你在編寫頁面的時候，就要縮小一倍。git

邊距寬度等縮小一倍比較精確，可是若是是字體縮小一倍的話，放到手機上面看就不太合適啦，好比16px的，縮小一倍就是8px，有點小了。github

本身剛開始寫的時候，不明白這640的意義，就本身在那邊隨便改邊距等，當和設計稿差很少的時候，就行了。web

這樣寫出來的跟設計稿是有出入的，等因而否認了設計師的成果。瀏覽器

2）自定義icon字體服務器

移動端，引入的文件最好是小一點，這樣在用2G載入的時候，速度也能快點。微信

原先我用的字體庫是Font-Awesome，作PC後臺的時候，用這個不錯，什麼類型的都有了，可是前端頁面最好仍是隻要須要的。

此次使用了阿里的Iconfont，在這裏面能夠本身製做字體，而且還有Unicode方式，讓IE6這種低端瀏覽器也來享受自定義字體。

2、穿透層與流佈局

1）flex佈局

上圖中最後一列有個空白處，而點擊這個空白處就須要能穿透點擊到下面那個列表。

此次地方就須要CSS，pointer-events:none。

其實用到這個屬性也是逼不得已，上面的佈局在有頂寬的時候，是很簡單的，float浮動+寬高度定死，寬度只要計算一下就能出來。

可是手機頁面的話，屏幕寬度都是不定的，那麼要計算這個寬度的話就太難了，並且還有margin，左右都有，中間也有。

沒辦法就用了個flex佈局，這個可讓瀏覽器自動計算寬度，並且仍是讓寬度自動相等。

接着就出現了上面要穿透的問題了。

flex流佈局有不少屬性，而我此次在項目中也僅僅是爲了方便計算寬度。

/*flexbox佈局*/
.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
.flex-wrap{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}
.flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
.flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
.flex-2{-webkit-box-flex:2;-webkit-flex:2;-ms-flex:2;flex:2;}
.flex-3{-webkit-box-flex:3;-webkit-flex:3;-ms-flex:3;flex:3;}

2）column屬性

這個是多列布局屬性，上面的城市塊佈局，原本是想用這個的，但發現很不合適。

dl {
    -webkit-column-count:4;
    -webkit-column-gap: 1px;
    column-count:4;
    column-gap: 1px;
}

<dl>
    <dd>
        <img src="images/city/nanjing.png"/>
        <p>南京</p>
    </dd>
    <dd>
        <img src="images/city/hefei.png"/>
        <p>合肥</p>
    </dd>
    <dd>
        <img src="images/city/shanghai.png"/>
        <p>上海</p>
    </dd>
</dl>

跟我想象中的使用方法不同，裏面若是是一個標籤的話，好比只要顯示個img標籤，展示的就是流佈局

<dl>
    <img src="images/city/shanghai.png"/>
    <img src="images/city/shanghai.png"/>
</dl>

3、選擇符

寫PC端的時候，用選擇符會很謹慎，萬惡的低版本IE好多選擇符都不支持，而到了移動端，狀況就不一樣啦，好多都能支持。

因此此次我大量使用了選擇符。

僞類選擇符:first-child、:last-child、:last-of-type等用的好多，原先不少列表的最後一個的樣式與其餘地方不同，要麼額外加一個樣式要麼用JS控制，如今只要用選擇符就能搞定，代碼的簡潔性也加強了。

1）用僞類美化單選框或多選框

用::before來將原控件蓋住，用圖片替代，在:checked選中後修改圖片，原本這些都是須要配合JS腳本的，如今只用CSS便可。

只是第一次點擊某個多選框的時候，會先隱藏，而後再出現選中圖片，形成一個閃爍。

input[type="checkbox"] {
  position: absolute;
  vertical-align: top;
  margin-top: 4px;
  margin-left: -20px;
  visibility:hidden;
}
input[type="checkbox"]::before {
    content: '';
    background:url('../images/checkbox.png') no-repeat center center;
    position: absolute;
    top:-3px;left:-2px;
    width:18px;height:19px;
    visibility:visible;
}
input[type="checkbox"]:checked::before {
    content: '';
    background:url('../images/checkbox_checked.png') no-repeat center center;
    position: absolute;
    top:-3px;left:-2px;
    width:19px;height:19px;
    visibility:visible;
}

2）flex佈局與::after配合出現的問題

這個地方爲了寬度相等，間距同樣，我使用了flex佈局，用flex佈局還會自動會將高度也對齊

選中的地方會有個小勾，而且有三角形背景，分別用了::before和::after設置，上面的圖片中就是兩個高度不同的內容塊

在IOS中，一切正常，很OK，可是在Android系統中就有點苦了。這好端端的三角形變形啦。

後面發現小勾是根據內容塊中原先的高度相對定位的，後面自動拉高後就不會觸發那段CSS了，最終只能用JS修改內容塊的高度，而後在觸發::after中的樣式

ul li.active{
    border:1px solid #dc481b;
    overflow:hidden;
}
ul li.active::before{
    content: "\e605";
    position:absolute;
    right:2px;
    bottom:2px;
    z-index:2;
    color:#FFF;
}
ul li.active::after{
    content:"#";
    background:#dc481b;
    color:#dc481b;
    width:50px;
    height:50px;
    position:absolute;
    right:-25px;
    bottom:-25px;
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
}

4、h1~h6

這幾個我在寫CSS的時候用的很是多，可是因爲沿用的是PC中的reset，顯示在移動端，字體會特別的大

並且在reset的時候，會設置margin-top和margin-bottom，但是好多場景下，都不會用到或者被父級元素用到了

索性我就去除了外邊距，而後從新reset了這幾個標籤中字體大小

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {font-family: inherit;font-weight: 500;line-height: 1.1;color: inherit;}
h1 small,h2 small,h3 small,h4 small,h5 small,h6 small,
.h1 small,.h2 small,.h3 small,.h4 small,.h5 small,.h6 small,
h1 .small,h2 .small,h3 .small,h4 .small,h5 .small,h6 .small,
.h1 .small,.h2 .small,.h3 .small,.h4 .small,.h5 .small,.h6 .small {
      font-weight: normal;line-height: 1;color: #777;
}
h1 small,.h1 small,h2 small,.h2 small,h3 small,.h3 small,
h1 .small,.h1 .small,h2 .small,.h2 .small,h3 .small,.h3 .small {
      font-size: 65%;
}
h4 small,.h4 small,h5 small,.h5 small,h6 small,.h6 small,
h4 .small,.h4 .small,h5 .small,.h5 .small,h6 .small,.h6 .small {
      font-size: 75%;
}
h1,.h1 {font-size: 22px;}h2,.h2 {font-size: 20px;}h3,.h3 {font-size: 18px;}
h4,.h4 {font-size: 16px;}h5,.h5 {font-size: 14px;}h6,.h6 {font-size: 12px;}