微信 weui 初体验

最近微信推出他们自己的H5组件（weui）组件的优点有两个：

1. 做为开发者的我们可以不用写太多css，直接拿过来就可以用。
2. 组件都有点击态，大大增加了用户的体验好感
3. 高清屏幕下 border : 0.5

1,何为点击态

当用手指触摸某个按钮的时候，按钮会变成深色，离开后按钮颜色自动恢复，这个效果让用户的体验感倍增。

2，高清屏幕下的 border ： 0.5 像素

正常情况下网页的 border 属性是没有 0.5 这个值的，我们看下效果

上面是 0.5 像素的边框，下面是 1 像素的边框，从肉眼上就可以看出差别。

代码如下：

    <div class="weui_cells">
        <div class="weui_cell">
            <div class="weui_cell_bd weui_cell_primary">
                <p>我是0.5像素</p>
            </div>
            <div class="weui_cell_ft">说明文字</div>
        </div>
    </div>
    <style>
    .weui_cells_a:before {
      content: " ";
      position: absolute;
      left: 0;
      right : 0;
      width: 100%;
      height: 1px;
      border-top: 1px solid #D9D9D9;
      color: #D9D9D9;
      -webkit-transform-origin: 0 0;
              transform-origin: 0 0;
      -webkit-transform: scaleY(0.5);
              transform: scaleY(0.5);

        /*这是before和after之间的区别*/
        top: 0;
    }
    .weui_cells_a:after {
      content: " ";
      position: absolute;
      left: 0;
      right : 0;
      width: 100%;
      height: 1px;
      border-bottom: 1px solid #D9D9D9;
      color: #D9D9D9;
      -webkit-transform-origin: 0 100%;
              transform-origin: 0 100%;
      -webkit-transform: scaleY(0.5);
              transform: scaleY(0.5);

      /*这是before和after之间的区别*/
       bottom: 0;
    }
    </style>

参考

http://www.html-js.com/article/Mobile-terminal-H5-mobile-terminal-HD-multi-screen-adaptation-scheme%203041

转载于:https://www.cnblogs.com/zhiyuan-2011/p/5289084.html