⼏款流⾏的HTML5UI框架⽐较（⼩结）
⼿机HTML5开发，⼤部分都使⽤现有的框架，这⾥简单⽐较⼏个流⾏的UI框架。作者⽐较⼀下⼏款流⾏的HTML5框架，个⼈意见，仅供参考。
（1）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借鉴。
（2）WeUI
优点：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，就会导致你页⾯失效。jquery框架原理
<body>
<div class=tab__hd>
</div>
</div>
</body>
和
<body>
<div>
<div class=tab__hd>
</div>
</div>
</div>
</body>
（3）Jquery Mobile
优点：这应该是最早的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
优点：兼容PC和⼿机，其推出的理念与样式，启发了很多后起之秀，例如将页⾯分成12份，根据分辨率不同，⾃动组合灯。在PC样式上，具有不可替代的作⽤。
缺点：也正因为他需要兼容PC和⼿机，使得虽然PC样式很优秀，但是⼿机效果只能说是“中规中矩”，毕竟“⼜想马⼉跑得快，⼜想马⼉不吃草”是不现实的。
（5）Framework7
没⽤过，但是看起来还不错，值得推挤。
（6）Amaze UI
（7）Layui
Layer⽬前⼈⽓极具上升，不过她还是偏重于PC
到此这篇关于⼏款流⾏的HTML5 UI框架⽐较(⼩结)的⽂章就介绍到这了，更多相关HTML5 UI框架内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章，希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。