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