推荐六款移动端 UI 框架

推荐六款移动端 UI 框架

作为一个前端人员来说,总结几款相对来说不错的用于移动端开发的UI框架是非常必要的,以下几种移动端UI框架就能基本满足工作中开发需要,根据项目需求,选用合适的框架搭建项目,更能容易提高开发效率。

一、MUI

        最接近原生APP体验的高性能前端框架,追求性能体验,是我们开始启动MUI项目的首要目标,轻量必然是重要特征。

        MUI不依赖任何第三方JS库,压缩后的JS和CSS文件仅有100+K和60+K,鉴于之前的很多前端框架(特别是响应式布局的框架),UI控件看起来太像网页,没有原生感觉,因此追求原生UI感觉也是我们的重要目标,MUI以iOS平台UI为基础,补充部分Android平台特有的UI控件

        官方链接:http://dev.dcloud.net.cn/mui/

二、Frozen UI

        由腾讯团队开发,适用于使用手Q规范设计的Web页面,而针对非手Q规范的页面,可通过修改变量定制界面主题。可以按需选择需要的组件,也可以采用cdn和combo的方式按需加载。使用iconfont展示图标,包含了按钮,列表,表单,提示,弹窗等常用组件,新增文本,布局,1px, rem,文字截断,占位,两端留白,两端对齐等解决方案,同时解决了移动端屏幕适配问题。CSS使用模块化的样式命名和组织规范,使用sass编写css代码。

        官方链接:http://frozenui.github.io/

三、Amaze UI

        Amaze UI 以移动优先(Mobile first)为理念,从小屏逐步扩展到大屏,最终实现所有屏幕适配,适应移动互联潮流。Amaze UI 含近 20 个 CSS 组件、20 余 JS 组件,更有多个包含不同主题的 Web 组件,可快速构建界面出色、体验优秀的跨屏页面,大幅提升开发效率。相比国外框架,Amaze UI 关注中文排版,根据用户代理调整字体,实现更好的中文排版效果;兼顾国内主流浏览器及 App 内置浏览器兼容支持。Amaze UI 面向 HTML5 开发,使用 CSS3 来做动画交互,平滑、高效,更适合移动设备,让 Web 应用更快速载入。

        官方链接:http://amazeui.org/

四、SUI Mobile 

        SUI Mobile 是一套基于 Framework7 开发的UI库。它非常轻量、精美,只需要引入我们的CDN文件就可以使用,并且能兼容到 iOS 6.0+ 和 Android 4.0+,非常适合开发跨平台Web App。

        官方链接:http://m.sui.taobao.org/

五、Muse-UI 

        基于 Vue 2.0 和 Material Desigin 的 UI 组件库,Muse UI 拥有40多个UI 组件,用于适应不同业务环境。Muse UI 自定义主题方式极为优雅,仅需少量代码即可完成主题样式替换。Muse UI 基于 Vue2.0 开发,Vue2.0是当下最快的前端框架之一,小巧,api友好,可用于开发的复杂单页应用。

        官方链接:https://muse-ui.org/#/zh-CN

六、AUI2.0

        AUI 2.0是一套全新的AUI框架,在1.X基础上进行了重新架构。结合实际项目出发,站在开发者和项目的角度,重新定义AUI框架。在2.0中使用了大量弹性响应式布局,采用容器+布局结构+控件的嵌套形式,方便开发者快速布局样式。我们充分吸取了AUI使用者的反馈意见和借鉴了市场上其他优秀UI框架,完成了2.0版本的开发。2.0遵循Google Material 设计规范,使用MIT开源协议。

        官方链接:http://www.auicss.com/doc/v/2/doc_id/1

推荐教程:《CSS教程》《JS教程》

以上就是推荐六款移动端 UI 框架的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1615187.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 04:47:32
下一篇 2025年12月24日 04:47:45

相关推荐

  • css如何实现适配iphone全面屏

    一、media query方式 /*iPhone X 适配*/@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { .fixed-bo…

    好文分享 2025年12月24日
    000
  • CSS开发常用命名

    CSS命名规范(规则)常用的CSS命名规则   头:header   内容:content/container   尾:footer 立即学习“前端免费学习笔记(深入)”;   导航:nav   侧栏:sidebar   栏目:column   页面外围控制整体佈局宽度:wrapper   左右中:…

    2025年12月24日
    000
  • CSS 尺寸的百分比

    CSS中的单位 绝对单位 in-英寸; cm; 立即学习“前端免费学习笔记(深入)”; mm; pt-磅 相对单位 em-与元素字号挂钩; rem-与根元素字号挂钩; px-与css像素挂钩 %-另一属性值的百分比 CSS中可以取百分比的属性 定位:top, right, bottom, left …

    2025年12月24日
    000
  • 关于css中的id选择器与class选择器的介绍

    id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。 例如: #para1{ text-align:center; color:red;} 注意: ID属性不要…

    2025年12月24日
    000
  • 3种CSS使用方法

    (1)链接式:(外部引入.css文件) ( 用得比较多 ) 在html加载前就被引用 在网页的 标签对中用引入外部样式表,使用html规则引入外部css :      导入式:(外部引入.css文件)      ( 不使用 ) @import在html加载完成后才引用,并且无法在JS DOM模型中插…

    2025年12月24日
    000
  • 深入理解px、rem、em、vh、vw之间的区别

    绝对长度 px px是像素值,是一个固定的长度,比如我们的米,厘米一样。 相对长度 为什么我们需要相对长度rem em等? 固定长度已经不能满足我们现在的需求了。 举例:比如我们在缩小我们屏幕的时候,我们不仅仅是需要缩小我们的盒子的宽高,我们还想要让我们字体大小也随之缩小,这样用户体验会更好一点。 …

    2025年12月24日
    000
  • 关于css样式表及多重样式优先级的介绍

    插入样式表的方法有三种,分别是: 1、外部样式表; 2、内部样式表; 3、内联样式 外部样式表 立即学习“前端免费学习笔记(深入)”; 在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在(文档的)头部: 实例如下: 浏览器会从文件 myst…

    2025年12月24日
    000
  • 常用的css背景属性介绍

    一、background-color 该属性定义了元素的背景颜色。 页面的背景颜色使用在body的选择器中,如下: 效果图: 立即学习“前端免费学习笔记(深入)”; 在CSS中,颜色值通常以以下方式定义: 1、十六进制 – 如:”#ff0000″ 2、RGB &#…

    2025年12月24日 好文分享
    000
  • 关于css文本属性的详细介绍

    文本颜色 颜色属性被用来设置文字的颜色。 颜色值有如下写法: 1、十六进制值 如: #FF0000 立即学习“前端免费学习笔记(深入)”; 2、RGB值 RGB(255,0,0) 3、颜色的名称 如: red 示例: 注意:如果为字体定义了颜色属性,那么必须定义背景色属性。 结果显示: (视频教程推…

    2025年12月24日 好文分享
    000
  • CSS Grid 深入理解

    简介 本教程将深入探讨 CSS 网格布局,并探索几乎所有的属性和功能。读完之后,你将能够用这种出色的 CSS 附加功能去处理任何一种布局。 术语:Grid Grid 是二维网格系统。它可以用来构建复杂的布局以及较小的界面。 立即学习“前端免费学习笔记(深入)”; 属性:display 只需要把一个元…

    2025年12月24日
    000
  • css链接状态有哪些

    首先,链接的样式可以用任何css属性(如颜色,字体,背景等)。 链接可以有不同的状态,如下: a:link – 正常,未访问过的链接 a:visited – 用户已访问过的链接 a:hover – 当用户鼠标放在链接上时 立即学习“前端免费学习笔记(深入)”; a…

    2025年12月24日 好文分享
    000
  • 关于css中清除浮动(clearfix)的介绍

    清除浮动clearfix (视频教程推荐:css视频教程) 实例代码: .clearfix:after, .clearfix:before { content: ” “; display: table;}.clearfix:after { clear: both;} .clearfix{zoom:1…

    2025年12月24日
    000
  • CSS属性box-sizing详解

    css盒模型 你需要先了解CSS盒模型 CSS盒模型中 width 与 height 的计算规则: 在CSS中,你设置一个元素的width与height只会应用到这个元素的内容区。如果这个元素有任何的 border 或 padding,绘制到屏幕上时的盒子宽度和高度会加上设置的边框(border)和…

    2025年12月24日 好文分享
    000
  • css实现将网页变成黑白色

    将整个网页全局变色有三种方法,分别是:css直接设置,添加svg滤镜,通过js遍历所有标签更改颜色。 1、css直接设置 直接编辑样式,然后在需要应用的地方设置class .gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(…

    2025年12月24日
    000
  • css中常用的水平垂直居中对齐方法有哪些

    一、文字的水平垂直居中 text-align: center; line-height: 单前元素高度; (视频教程推荐:css视频教程) 二、元素的水平垂直居中 1、使用绝对定位 立即学习“前端免费学习笔记(深入)”; 2、使用绝对定位+ calc() 3、使用绝对定位+transform 4、使…

    2025年12月24日 好文分享
    000
  • 如何用CSS写轮播图效果?

    相信很多小伙伴做过的项目里面都有轮播图这么一个需求,有的小伙伴可能会自己造轮子,有的小伙伴可能会直接Google轮播图插件 但是如果不使用javascript,能不能实现轮播图的效果呢?可能小伙伴们并没有考虑过这个问题,那么下面我们就一起来用css实现一个简易的轮播图 基本需求分析 由于css无法做…

    2025年12月24日
    000
  • css实现隐藏元素效果

    display: none 1、DOM结构: 浏览器不会渲染display:none 的元素, 并且不占据页面空间 2、事件监听: 无法对元素进行事件监听 3、继承: 不会被子元素继承(子元素设置display: block 不会显示) 4、改动: 改动属性值会引起页面的重排和重绘 立即学习“前端免…

    2025年12月24日
    000
  • CSS响应式布局之媒体查询

    在实际项目中,总会遇到响应式布局的问题,如果未曾使用一些响应式UI框架的话,那么一般就会用媒体查询来实现响应式布局,由于遇到的实在太频繁了,所以我觉得还是有必要稍微进行一下总结的。 首先我们需要了解到的一点是,使用媒体查询这种方式,当重置浏览器大小的过程中,页面就会根据浏览器的宽度和高度重新渲染页面…

    2025年12月24日
    000
  • css的四种引入方式分别是什么

    css的四种引入方式分别是:行内样式、内嵌样式、链接样式和导入样式。 1、行内样式 最直接最简单的一种,直接对HTML标签使用,例如: 缺点:HTML页面不纯净,文件体积大,不利于蜘蛛爬行,后期维护不方便。 (视频教程推荐:css视频教程) 立即学习“前端免费学习笔记(深入)”; 2、内嵌样式 内嵌…

    2025年12月24日
    000
  • 如何使用 CSS 颜色?

    CSS 中颜色有多种不同的应用方式;预定义的颜色名称、rgb、rgba 以及使用十六进制颜色值。下面的 CSS 展示的是使用预定义的颜色名称,背景色将设置为 ‘purple(紫色)’。 background-color: Purple; CSS 中有很多预定义的颜色,可以向上…

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信