微信 weui 初体验

最近微信推出他们自己的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 初体验相关推荐

《玩转微信6.0》一1.2　微信初体验
本节书摘来异步社区<玩转微信6.0>一书中的第1章,第1.2节,作者: 王璨 , 周聪 , 章佳荣责编: 陈冀康,更多章节内容可以访问云栖社区"异步社区"公众号查看. ...
taro 重新加载小程序_Taro开发微信小程序的初体验
了解Taro 听说Taro是从几个星期前开始的,在一次饭桌上,一个小伙伴说:"Hey, 你听说了Taro么,听说只需要写一套程序就可以生成H5,小程序以及RN的代码模板,并且类似于React ...
android微信7,微信7.0安卓版之初体验
原标题:微信7.0安卓版之初体验就在上周末微信 iOS版先走一步更新到了7.0版本,紧跟着微信安卓7.0测试版也上线了,笔者也在第一时间跟进升级到了微信7.0版.通过几天的使用,对新增的功能基本有了 ...
[小记] 微信小程序 - 人脸识别前端（一）初体验
微信小程序 - 人脸识别前端(一)初体验记录尝试使用拍照模式进行人脸比对的过程-此方式有一定缺陷:调用系统摄像头,会保留照片于系统相册等功能:人脸识别 + 打卡签到说明:前端仅做拍照和转码操作等 ...
微信小程序开发者工具初体验及实现技术初探
微信小程序是当前的热点,市面上已经有很多微信小程序开发相关的文章,今天晚上抽了点时间折腾了微信小程序,并顺便看看了下微信小程序开发者工具的实现,是使用Node.js开发的,UI是基于NW.js框架开发 ...
聚合类新闻client初体验
初体验的产品:今日头条(ios3.6).百度新闻(ios4.4.0).ZAKER(ios4.4.5).鲜果(ios3.8.7).中搜搜悦(ios4.0.1).Flipboard(ios2.3.9) 1 ...
文档数据库RavenDB-介绍与初体验
不知不觉,".NET平台开源项目速览"系列文章已经15篇了,每一篇都非常受欢迎,可能技术水平不高,但足够入门了.虽然工作很忙,但还是会抽空把自己知道的,已经平时遇到的好的开源项目分 ...
java tls 实例_grpc加密TLS初体验（go、java版本）
grpc加密TLS初体验(go.java版本) grpc-go.java的安装编译helloworld可以参考如下文章 openssl的安装.生成秘钥证书可以参考如下文章示例代码go版本服务端代码 ...
js实战代码系列—周杰伦给你报时间+网页页签制作模板+jQuery初体验
等到下次需要用的时候,可以回来找模板用哈哈哈哈! 刚碰jQuery,今天是个好日子,明天继续学jQuery,明天也是个好日子. https://blog.csdn.net/hanhanwanghaha ...

微信 weui 初体验

1,何为点击态

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

参考

微信 weui 初体验相关推荐

最新文章

热门文章