几款流行的HTML5 UI框架比较(小结)


Posted in HTML / CSS onApril 08, 2021

手机HTML5开发,大部分都使用现有的框架,这里简单比较几个流行的UI框架。作者比较一下几款流行的HTML5框架,个人意见,仅供参考。

(1)MUI

网址:http://dev.dcloud.net.cn/mui/

优点:MUI是数字dclound推出的一款流行框架,个人感觉,这是目前最好的一个H5 UI框架,使用简单,操作方便。

缺点:MUI为了达到原生效果,重新定义了Form表单里input,select,textarea所有的样式,这给用户自定义样式带来的不便。

例如下图左图是MUI里,直接使用<select>标签,是没有下拉箭头的,这会让用户迷惑。

右图,我们可以在HTML代码里,重新定义select让其显示。

select {
    -webkit-appearance: menulist !important;
}

其实,我在用bootstrap时,到想起当时bootstrap开发人员在定义table时的一句话,他们说他们本可以通过CSS重写table,但是,因为有些网站需要原始的table样式,所以,为了和前者兼容,他们方式了

通过全局CSS改变table默认样式,如果开发人员像使用bootstrap的table样式,只要增加 <table> 就可以了,这样,既不增加多少工作量,又能兼容过去的程序。

我认为这点值得MUI借鉴。

几款流行的HTML5 UI框架比较(小结)

(2)WeUI

网址:https://weui.io/

优点:WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。所以,其样式基本上核微信“长”的一样。

缺点:抱歉,我对WeUI的评价不高,这和腾讯的大名完全不符。我原本对WeUI期望甚高,结果实际测试非常令人失望。这些失望表现在太过于微信化,限制了他是使用广度。

更主要的是,其CSS名称与其他H5框架完全不一样,以简单的面板为例,公认的命名方式为:

<div class="panel">
<div class="panel panel-header">
标题
</div>
<div class="panel panel-body">
主体
</div>
</div>

但weui的命名类似如下:header缩写成了hd,body所写成了bd,类的名称,你叫做page__title也没问题,问题是page和title之间是2个下划线,而有些采用类名称采用:中划线和下划线一起用。

如weui-cell__hd。当你大量编写页面时,你脑子里会不停的切换想着WeUI类到底叫什么名字。

<div class="page panel ">
    <div class="page__hd">
        <h1 class="page__title">Title</h1> 
    </div>
    <div class="page__bd"> 

      <div class="weui-cell">
        <div class="weui-cell__hd"><label   class="weui-label">手机</label></div>
        <div class="weui-cell__bd">
          <span class="weui-input" id="mobile"  ></span>
        </div>
      </div>        
  </div>        
</div>

WeUI还有一个致命缺点:多一个span或者div都可能使得你的样式完全失效。例如如下,可能仅仅在body与tab__hd之间多了一个div,就会导致你页面失效。

<body>
<div class=tab__hd>
</div>
</div>
</body>
和
<body>
<div>
<div class=tab__hd>
</div>
</div>
</div>
</body>

(3)Jquery Mobile

网址:http://jquerymobile.com/

优点:这应该是最早的HTML5框架,

缺点:Jquery虽然很流行,但是不得不说JqueryMobile是一个失败的作品。现在好像都停止更新了。JM最大的缺点是速度太慢。

这也难怪,浏览器支持的是CSS与JS,但是JM通过自定义很多data-*来重写渲染最终的样式,

例如如下代码的data-enhanced,data-icon,这些data-*属性,浏览器并不能识别,需要JM的JS引擎解释后,转换为CSS语言,

当页面大量使用这些data-*属性时,其性能极具下降,现在应该没什么人使用了。

<input type="button" data-enhanced="true" value="Enhanced - Left">
  <input type="button" data-icon="delete" value="Left (default)">

(4)Bootstrap

网址:http://www.bootcss.com/

优点:兼容PC和手机,其推出的理念与样式,启发了很多后起之秀,例如将页面分成12份,根据分辨率不同,自动组合灯。在PC样式上,具有不可替代的作用。

缺点:也正因为他需要兼容PC和手机,使得虽然PC样式很优秀,但是手机效果只能说是“中规中矩”,毕竟“又想马儿跑得快,又想马儿不吃草”是不现实的。

(5)Framework7

网址:http://www.framework7.cn/

没用过,但是看起来还不错,值得推挤。

(6)Amaze UI

网址:http://amazeui.org

没用过,其实Amaze有基于 React.js 的移动端 Web 组件库 http://t.amazeui.org因为是基于React.js的,感觉入门门槛挺高

(7)Layui

网址http://www.layui.com

Layer目前人气极具上升,不过她还是偏重于PC

到此这篇关于几款流行的HTML5 UI框架比较(小结)的文章就介绍到这了,更多相关HTML5 UI框架内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS伪类与CSS伪元素的区别及由来具体说明
Dec 07 HTML / CSS
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
Jan 23 HTML / CSS
结合CSS3的布局新特征谈谈常见布局方法
Jan 22 HTML / CSS
简单掌握CSS3中resize属性的用法
Apr 01 HTML / CSS
html+css3实现的登录界面
Dec 09 HTML / CSS
HTML中使用SVG与SVG预定义形状元素介绍
Jun 28 HTML / CSS
浅析HTML5中header标签的用法
Jun 24 HTML / CSS
localStorage的过期时间设置的方法详解
Nov 26 HTML / CSS
HTML5 通过Vedio标签实现视频循环播放的示例代码
Aug 05 HTML / CSS
纯html+css实现打字效果
Aug 02 HTML / CSS
通过feDisplacementMap和feImage实现水波特效
Apr 24 HTML / CSS
html中相对位置与绝对位置的具体使用
May 15 HTML / CSS
css 中多种边框的实现小窍门
HTML中table表格拆分合并(colspan、rowspan)
HTML速写之Emmet语法规则的实现
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
Apr 07 #HTML / CSS
html+css 实现简易导航栏功能
Apr 07 #HTML / CSS
css3实现的加载动画效果
CSS3 天气图标动画效果
You might like
使用PHP和XSL stylesheets转换XML文档
2006/10/09 PHP
php include加载文件两种方式效率比较
2010/08/08 PHP
php判断一个数组是否为有序的方法
2015/03/27 PHP
PHP+MySql+jQuery实现的&quot;顶&quot;和&quot;踩&quot;投票功能
2016/05/21 PHP
10个值得深思的PHP面试题
2016/11/14 PHP
使用PHPMailer发送邮件实例
2017/02/15 PHP
php中关于换行的实例写法
2019/09/26 PHP
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
2010/03/31 Javascript
对之前写的jquery分页做下升级
2014/06/19 Javascript
js简单的点击返回顶部效果实现方法
2015/04/10 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
2018/08/09 Javascript
webpack4.0 入门实践教程
2018/10/08 Javascript
浅析Vue.js中v-bind v-model的使用和区别
2018/12/04 Javascript
[02:44]重置世界,颠覆未来——DOTA2 7.23版本震撼上线
2019/12/01 DOTA
[39:19]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第二场 11.26
2020/11/30 DOTA
简单谈谈Python中的反转字符串问题
2016/10/24 Python
基于python的Tkinter编写登陆注册界面
2017/06/30 Python
同时安装Python2 &amp; Python3 cmd下版本自由选择的方法
2017/12/09 Python
Python星号*与**用法分析
2018/02/02 Python
pygame游戏之旅 python和pygame安装教程
2018/11/20 Python
pycharm debug功能实现跳到循环末尾的方法
2018/11/29 Python
windows 10 设定计划任务自动执行 python 脚本的方法
2019/09/11 Python
python动态视频下载器的实现方法
2019/09/16 Python
Python操作Sonqube API获取检测结果并打印过程解析
2019/11/27 Python
Centos7下源码安装Python3 及shell 脚本自动安装Python3的教程
2020/03/07 Python
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
2013/02/07 HTML / CSS
用HTML5制作数字时钟的教程
2015/05/11 HTML / CSS
犹他州最古老的体育用品公司:Al’s
2020/12/18 全球购物
小孩百日宴答谢词
2014/01/15 职场文书
新书吧创业计划书
2014/01/31 职场文书
远程网络教育毕业生自我鉴定
2014/04/14 职场文书
2014年小学生迎国庆65周年演讲稿
2014/09/27 职场文书
食品安全主题班会
2015/08/13 职场文书
Go语言切片前或中间插入项与内置copy()函数详解
2021/04/27 Golang
Anaconda安装pytorch和paddle的方法步骤
2022/04/03 Python
Python如何快速找到多个字典中的公共键(key)
2022/04/29 Python