赚点微信页面外快的一点记录

时间 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;}