微信 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