扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
jquery mobile和bootstrap都是较好的框架。为了使用便利,下文列举了目前最强大应用最广泛的几款前端开发框架。
创新互联专注为客户提供全方位的互联网综合服务,包含不限于成都做网站、网站设计、环翠网络推广、微信小程序开发、环翠网络营销、环翠企业策划、环翠品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;创新互联为所有大学生创业者提供环翠建站搭建服务,24小时服务热线:18982081108,官方网址:www.cdcxhl.com
1. Bootstrap
Boostrap绝对是目前最流行用得最广泛的一款框架。它是一套优美,直观并且给力的web设计工具包,可以用来开发跨浏览器兼容并且美观大气的页面。它提供了很多流行的样式简洁的UI组件,栅格系统以及一些常用的JavaScript插件。
2. Fbootstrapp
Fbootstrapp基于Bootstrap并且提供了跟Facebook iframe apps和设计相同的功能。包含用于所有标准组件的基本的CSS和HTML,包括排版、表单、按钮、表格、栅格、导航等等,风格与Facebook类似。
3. BootMetro
BootMetro框架的灵感来自于Metro UI CSS,基于Bootstrap 框架构建,用于创建Windows 8 的Metro风格的网站。它包括所有Bootstrap的功能,并添加了几个额外的功能,比如页面平铺,应用程序栏等等。
4. Kickstrap
Kickstrap是Bootstrap的一个变体。它基于Bootstrap,并在它的基础上添加了许多app,主题以及附加功能。这使得这个框架可以单独地用于构建网站,而不需要额外安装什么。你需要做的仅仅是把它放到你的网站上,然后用就可以了。
5. Foundation
Foundation 是一款强大的,功能丰富的并且支持响应式布局的前端开发框架,你可以通过Foundation快速创建原型,利用它所包含的大量布局框架,元素以及最优范例快速创建在各种设备上可以正常运行的网站以及app。Foundation在构建的时候秉承移动优先的策略,它拥有大量实用的语义化功能,并且使用Zepto类库来取代jQuery,这样可以带来更好的用户体验,并且提高运行的速度。
6. GroundworkCSS
GroundworkCSS 是前端框架家族里面新添的一款小清新框架。它是基于Sass和Compass的一个高级响应式的HTML5,CSS以及JavaScript工具包,可以用于快速创建原型并且建立在各种浏览设备上可以正常工作的网站和app。
7. Gumby
Gumby 是一款基于Sass和Compass的简单灵活并且稳定的前端开发框架。
它的流式-固定布局(fluid-fixed layout)可以根据桌面端以及移动设备的分辨率自动优化要呈现的网页内容。它支持多种网格布局,包括多列混杂的嵌套模式。Gumby提供两套PSD的模板,方便你在12列和16列的网格系统上进行设计。
8. HTML KickStart
HTML Kickstart 是一款可以用来方便创建任何布局的集合HTML5,CSS和jQuery的工具包。它提供了干净,符合标准以及跨浏览器兼容的代码。
9. IVORY
IVORY 是一款轻量,简单但是强大的前端框架,可以用于320到1200像素宽度的响应式布局。它基于12列的响应式网格布局,包含表格,按钮,表格,分页,拨动开关,工具提示,手风琴,选项卡等网站中常用的组件和样式。
10.Kube
最后,如果你的新项目需要一款实在的,不需要复杂的额外功能组件的,足够简单的框架,那么 Kube 将会是你正确的选择。Kube是一款最小化的,支持响应式的前端框架,它没有强加的样式设计,因此给了你充分的自由来开发自己的样式表。它提供了一些web元素的基本样式,比如网格,表单,排版,表格,按钮,导航,链接以及图片等等。
用html5做的移动端网站好处如下:
1. 上手迅速并支持快速迭代,与Android和iOS相比,使用JQuery Mobile和HTML5构建你的UI和逻辑会比在原生系统下构建快得多。此外,要使用原生代码将一个list view连接到远程的数据源并具有漂亮的外观是十分复杂的
2.避免麻烦的应用商店审批过程以及调试、构建带来的痛苦:为手机开发应用,尤其是iOS系统的手机,最痛苦的过程莫过于通过Apple应用商店的审批。想要让一个原生应用程序发布给iOS用户,需要等待一个相当长的过程(需要好几天,甚至可能是好几周)。不仅在第一次发布程序时要经历磨难,以后的每一次升级也是如此。这使得QA和发布流程变得复杂,还会增加额外的时间。进一步的好处是,发布beta或测试版本会更加容易。只要告诉用户用浏览器打开你的网址就可以了!不需要考虑iOS令人抓狂的DRM,也不需要理会Android必须的APK。
3.支持跨平台和跨设备开发:一个巨大的好处是,应用程序马上可以在Android和IOS上工作,同样也可以在其他平台上工作。作为一个独立开发者,为不同的平台维护基础代码是一项巨大的工作。为单个手机平台编写高质量的手机应用需要全职工作,为每个平台重复做类似的事情需要大量的资源。
HTML的全称是超文本标记语言,是一种标记语言。它包括一系列标签,可以统一网络上文档的格式,将分散的互联网资源连接成一个逻辑整体。HTML是由HTML命令组成的描述性文本,可以解释文字、图形、动画、声音、表格、链接等。Html是一种用来描述网页的语言。它被称为超文本标记语言,它是一种标记语言。它包括一系列标签,可以统一网络上文档的格式,将分散的互联网资源连接成一个逻辑整体。
html5移动开发跟pc开发区别还是有的,如下几点;
移动端不需要 300ms 的单击确认,所以不要监听 click 事件
2. 移动端网络一般较慢,如何减小页面体积及请求数,利用好缓存
3. 移动端需要点击的元素及其间隔不能太小,考虑手指的面积
4. 横屏和竖屏下的表现
5. 不同浏览器间的兼容性(太多了,如 position:fixed)
6. Retina 屏图片会不会模糊
7. 输入状态键盘会不会挡住输入内容
8. 在浏览器上点击后退的行为
9. 某些浏览器(如 Safari)的隐私模式下 cookie 和 localStorage 的替代方案
总的来说屏幕变小了要做相应的适配跳转是最大的不同。
PC和mobile上是有区别的。
网页主要体现在倍率上,还有HTML5兼容问题。
iphone4s倍率是2x,即2倍;
iphone6倍率是2x;
iphone 6 plus 倍率是3x;
安桌上
hdpi倍率是1.5x;
xhdpi倍率是2x;
xxhdpi倍率是3x;
要想图片在mobile上得到图片的原始清晰度,和大小,那么他和PC上1x倍率的图片对应关系是;
PC:像素 =像素 * 倍率;
例如:100px = 100px * 2 =iphone6;这样清晰度和大小看起来都一样。
这样同一张图,在电脑上你是100px宽高,在iphone6上你就是200px的宽高,看起来清晰度差不多,若你将100px的图片不变放到iphone6上,那么他会变得比想象中小。若你又不想增加宽度200px达到目的,那么你可以按照如下解决问题。
解决手机上全屏显示(小图适配显示,会放大,牺牲清晰度为代价)的方法是在head中加入
meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" 。
meta告诉浏览器设备初始时候无缩放,最大缩放为原始大小,用户不可以缩放。
我仅给你讲解有很大倍率区别,需要专业学习倍率。
至于html5和一些标签,js的兼容就容易理解多了。
PC要考虑IE8只兼容部分html5标签,IE9也不够完全。
其他一些 flash运用,交互也是有区别的。
iphone不知道flash,上系上js多了触控事件,PC的是点击事件等
下面再来总结下HTML5还有哪些框架是适合面向手机设备的开发的。
1、jQuery Mobile
jQuery
Mobile 是 jQuery 在手机上和平板设备上的版本。jQuery Mobile
不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery
Mobile开发团队说:能开发这个项目,我们非常兴奋。移动Web太需要一个跨浏览器的框架,让开发人员开发出真正的移动Web网站。
2、jQTouch
jQTouch 是一个 jQuery 的插件,主要用于手机上的 Webkit 浏览器上实现一些包括动画、列表导航、默认应用样式等各种常见UI效果的 JavaScript 库。支持包括 iPhone、Android 等手机。
3、DHTMLX Touch
DHTMLX
Touch是一个免费的HTML5/JavaScript框架,专门为触摸屏设备而优化。为您带来快速开发工艺精美的移动Web应用程序的能力。
DHTMLX Touch UI
Designer是一个可视化的编辑器用于构建移动用户界面。它能够帮您以最少的编码构建一流的用户界面。在其主页上提供一些示例可以展示DHTMLX
Touch强大的用户界面。包括一个menu app for the iPad (适用于开发餐厅应用) 和Book Shop
(一个电子书店应用)。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流