最近微信推出他們自己的H5組件（weui）組件的優點有兩個：

做為開發者的我們可以不用寫太多css，直接拿過來就可以用。

組件都有點擊態，大大增加了用戶的體驗好感

高清屏幕下 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

總結

以上是生活随笔為你收集整理的微信 weui 初体验的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。