展开

关键词

HTML5应用

1.离线缓存为HTML5应用提供了基础 HTML5 Web Storage API可以看做是加强版的cookie,不受数据大小限制,有更好的弹性以及架构,可以将数据写入到本机的ROM中,还可以在关闭浏览器后再次打时恢复数据 2.专为平台定制的表单元素 浏览器中出现的html5表单元素与对应的键盘: 类型 用途 键盘 Text 正常输入内容 标准键盘 Tel 电话号码 数字键盘 Email 电子邮件地址文本框 带有@和. 设计师要知道,用的时候记得告诉研同事一声! 3.丰富的交互方式支持 提升互能力:拖拽、撤销历史操作、文本选择等 Transition – 组件的效果 Transform – 组件的变形效果 Animation – 将和变形加入画支持 4.HTML5使用上的优势 更低的及维护成本; 使页面变得更小,减少了用户不必要的支出;而且,性能更好使耗电量更低; 方便升级,打即可使用最新版本,免去重新下载升级包的麻烦,使用过程中就直接更新了离线缓存

63280

浅淡HTML5Web

说实话,我们这次的项目,整个项目组的人都是第一次,最初立项的时候为是选择native app和web app还争论了一番,最后综合考虑,我们选择了web(我们选择了h5)。 响应式web设计 说到这个,面对的屏幕尺寸那叫一个丰富,其中安卓阵营就够让人头痛的。 2.CSS3新增属性 现在两大阵营ios和android都是基于webkit内核的,而webkit内核对CSS3的支持走在了前面,在这里我们可以抛翔一样的ie家族,尽情享受多彩绚丽CSS3世界吧 #id{……}、div span{……}、div[class="classname"]{} 但是由于ie某些浏览器的原因,很多好用的选择符不能广泛使用,如ie6只支持a标签的伪类选择符,但是在,我们就不用在意这些了 (6)、CSS3绘图和CSS3画 在html5和css3的世界里,很多图片都是多余的,我们可以尽情挥自己的想象,让CSS3替代不必要的图片不必要的JavaScript,另外做CSS3画时最好将画代码提取出来单独命名

61450
  • 广告
    关闭

    腾讯云618采购季来袭!

    一键领取预热专享618元代金券,2核2G云服务器爆品秒杀低至18元!云产品首单低0.8折起,企业用户购买域名1元起…

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    AppCan——HTMl5应用平台

    AppCan是HTMl5应用平台,支持跨平台,可以简单、快速、高效应用。 倡导Hybrid App。 为HTML5提供底层Native交互能力。 ? 工具IDE AppCan IDE基于Eclipse定制,支持跨平台、本地打包、模拟调试、真机同步等功能 模拟调试 ? 左边部分是手机的一些模拟器。 API文档可以参考[这里], 覆盖了应用中的常用场景。(http://newdocx.appcan.cn/index.html?templateId=315)。 JS SDK AppCan将常用的UI和功能性模块封装成了一个库,者只需要引入appcan.min.js即可,另外把对backbone, zepto, underscore的依赖也打包在基础库中了 JS SDK 文档参考这里 总结 AppCan是一种基于H5实现跨平台App的解决方案,封装了一些常用的UI组件供js调用,提供了实现一整套流程的IDE,包括调试,打包等。

    2K60

    07-教程-视口

    Web中就是指的CSS的逻辑像素。 视口 问题:PC设计的网页一般都是大于960px 尺寸,上的浏览器为了能够将那些为PC设计的网站正常显示,一般都给一个默认的整屏的宽度为980px(css像素),虽然能这样让浏览器兼容大部分 2.2 视口 在视口与浏览器屏幕宽度不再相关联,可以比浏览器的可视区域更大或者更小,还可以对页面进行缩放(放大、缩小)。 视觉视口是用户正在看到的网站的区域,对于的javascript属性是window.innerWidth/Height 2.2.2 布局视口(layout viewport) 布局视口:在视口与浏览器屏幕宽度不再相关联 布局视口不会受到缩放的影响,缩放不会导致页面重排渲染,对于宝贵的性能来说非常重要。

    42780

    10-教程-事件

    在前Web中,有一部分事件只在产生,如触摸相关的事件。接下来给大家简单总结一下的事件。 1. PC事件在的兼容问题 1.1 click事件的200~300ms延迟问题 由于默认的布局视口宽度是980像素,所以网页文字非常小,为了快速让网页还原到原来的大小,Safari最新引入了双击缩放功能 特有的touch事件 由于设备大都具备触摸功能,所以浏览器都引入了触摸(touch)事件。 封装tap事件 由于点击事件经常使用,如果用click会有延迟问题,一般我们会用touch事件模拟的点击事件, 以下是封装的几个事件,仅供参考。 ---- 参考文章: web---Touch事件详解 MDN:TouchEvent 常见的触摸相关事件touch、tap、swipe等整理

    1.2K80

    07-教程-视口

    Web中就是指的CSS的逻辑像素。 视口 问题:PC设计的网页一般都是大于960px 尺寸,上的浏览器为了能够将那些为PC设计的网站正常显示,一般都给一个默认的整屏的宽度为980px(css像素),虽然能这样让浏览器兼容大部分 2.2 视口 在视口与浏览器屏幕宽度不再相关联,可以比浏览器的可视区域更大或者更小,还可以对页面进行缩放(放大、缩小)。 视觉视口是用户正在看到的网站的区域,对于的javascript属性是window.innerWidth/Height 2.2.2 布局视口(layout viewport) 布局视口:在视口与浏览器屏幕宽度不再相关联 布局视口不会受到缩放的影响,缩放不会导致页面重排渲染,对于宝贵的性能来说非常重要。

    648120

    10-教程-事件

    在前Web中,有一部分事件只在产生,如触摸相关的事件。接下来给大家简单总结一下的事件。 1. PC事件在的兼容问题 1.1 click事件的200~300ms延迟问题 由于默认的布局视口宽度是980像素,所以网页文字非常小,为了快速让网页还原到原来的大小,Safari最新引入了双击缩放功能 特有的touch事件 由于设备大都具备触摸功能,所以浏览器都引入了触摸(touch)事件。 封装tap事件 由于点击事件经常使用,如果用click会有延迟问题,一般我们会用touch事件模拟的点击事件, 以下是封装的几个事件,仅供参考。 ---- 参考文章: web---Touch事件详解 MDN:TouchEvent 常见的触摸相关事件touch、tap、swipe等整理

    1.1K70

    总结

    如何让我们所的手机页面能有更好的交互体验,就是这篇文章的主旨:web问题和优化小结。 如果是复杂的画可以使用css3+js(或者html5+css3+js)配合,效果只有想不到,没有做不到。 避免页面跟着滑 这个细节是我在基于vue焦点图的时候遇到的,后来自己找不到方法,直接在sf上提问了,大家可以去参考下:轮播图,上下滑的时候不触页面的滚 ps:滑我没有使用什么库,是我根据 1.web有哪些优化方案? 2.web页面性能优化方案 3.Web前优化最佳实践及工具集锦 4.系列——页面性能优化 5.Web性能优化:图片优化 16.小结 我在web(手机网站)上,遇到的问题,暂时就是上面这些了

    55810

    初识

    对于pc的前以及html5和css3学习过后对页面布局更加熟练了,对于现在更多倾向于,对于和传统PC又有所不同,下面简单认识下概况! 对于学习首先要了解下面三个概念(设备独立像素,物理像素,和像素比),下面简单介绍下这三个概念! 上面说过的设备独立像素如何改变,下面就看看使用的meta的viewport标签 <meta name="viewport" content="width=device-width,initial-scale minimum-scale=1,maximum-scale=1//最大最小缩放比例,一般不用设置 <em>移</em><em>动</em><em>端</em><em>开</em><em>发</em>的meta标签一般只需要一下的属性就行 <meta name="viewport" content ="width=device-width,initial-scale=1,user-scalable=no" /> 我们不喜欢用户进行缩放,直接我们在过程中,转换成对应的物理像素能较好的观察哦设备的显示效果

    18940

    08-教程-适配方案

    由于的特殊性,屏幕的尺寸碎片化严重,要想很好的适配不同的尺寸的设备,需要我们前相比PC要做一些基层的适配方案。 1. 的取值: 1rem = 100px 或者 1rem = 1/10 * 理想视口的宽度 chrome浏览器字体小于12px(会被重置为12px) 固定设计稿的宽度+根据设备态适配缩放 直接按照设计稿编写固定尺寸元素 2.1 横向百分比 + 纵向高度固定 首先看案例: 拉勾网首页顶部的logo区域,不管如何变化浏览器的宽度,高度不变化,宽度自适应。 缩放自适应布局方式(推荐***) 简单点说就是,的时候根据设计搞完全还原像素,然后根据屏幕的宽度通过js态改变页面的缩放,恰好是理想视口的大小。 原理核心就是修改页面mate标签的缩放。 这样优点非常多,首先人员直接像素还原,效率很高,也没有1像素的问题。也是老马推荐大家使用的方式。

    931100

    08-教程-适配方案

    由于的特殊性,屏幕的尺寸碎片化严重,要想很好的适配不同的尺寸的设备,需要我们前相比PC要做一些基层的适配方案。 1. Rem的取值: 1rem = 100px 或者 1rem = 1/10 * 理想视口的宽度 chrome浏览器字体小于12px(会被重置为12px) 固定设计稿的宽度+根据设备态适配缩放 直接按照设计稿编写固定尺寸元素 2.1 横向百分比 + 纵向高度固定 首先看案例: 拉勾网首页顶部的logo区域,不管如何变化浏览器的宽度,高度不变化,宽度自适应。 ? 缩放自适应布局方式(推荐***) 简单点说就是,的时候根据设计搞完全还原像素,然后根据屏幕的宽度通过js态改变页面的缩放,恰好是理想视口的大小。 原理核心就是修改页面mate标签的缩放。 这样优点非常多,首先人员直接像素还原,效率很高,也没有1像素的问题。也是老马推荐大家使用的方式。

    70060

    vue总结

    适配 相对于PC来说,设备分辨率百花齐放,千奇百怪,对于每一个者来说,适配是我们进行第一个需要面对的问题。 user-scale=no禁止缩放 所以现在我们知道,这段在常见的代码的意思,即将visualviewport和layoutviewport设置为idealviewport的值;这样我们在就不会出现滚条 键盘弹出与使用transform属性的情况在是很常见的,所以需要谨慎使用position:fixed。 推荐使用flex flex,即弹性布局,兼容性较好,能够满足大部分布局需求。 ,在项目中重复造轮子是一件很不明智的事情;项目时我们可以借助第三方组件、插件提高我们的效率。 常用组件库 VantUI(https://youzan.github.io/vant/#/zh-CN/)是有赞源的一套轻量、可靠的Vue组件库;支持按需引入、主题定制、SSR,除了常用组件外,针对电商场景还有专门的业务组件

    36140

    H5入门

    昨天才现 原来页面中的JS可以这样写。 然后再随便表一些感慨吧。问渠那得清如许,为有源头活水来。 H5做的页面确实超级漂亮。但 为了在同事朋友面前装一下,还是要熟悉一下的。 然后就可以告诉他们:不就是CSS3新增的那几个画属性,在加上一下JS的东西嘛,不难!^_^ 昨天看了一下午的一个H5。 首先,作为非前人员、要 抛绚烂的素材,来分析内部实现原理。 观察的多了,就会现。都会有个 进度条或者类似的加载界面(后面你会知道比较坑)。 、CSS3新增画、CSS3新增画(the point) 先这样吧

    37720

    小技巧

    技巧 ? 01 一、样式按组件或板块分文件写再合成 ①设置各种变量 采用scss或者less来写css代码有很多好处。这里就不详细说。 不过,这里要注意,子模块的文件名要以“_”始哦,这样就不会被编译,而是需要引用的时候再编译哦。例子如图: ? 02 二、页面适应性布局 个人认为,适配比较好的布局方式是百分比+rem布局。 各种屏幕下,这四块都是平分并且不会出现横向滚条的。不过要注意,这个时候的间距就不要用margin-left和margin-right来撑,而是用padding来撑。 然后神奇的事情就生了。当你改变尺寸时,字体。图片等,就会自跟着适应了。用起来真的很爽! 还有一个就是,如果你用谷歌调试的时候,会现,效果是这样的: ? 对,就是会出现一个明显的滚条。但是如果你用真机,也就是用设备看的时候,你会现其实滚条是不会出现的。

    13930

    vue总结

    适配 相对于PC来说,设备分辨率百花齐放,千奇百怪,对于每一个者来说,适配是我们进行第一个需要面对的问题。 user-scale=no禁止缩放 所以现在我们知道,这段在常见的代码的意思,即将visualviewport和layoutviewport设置为idealviewport的值;这样我们在就不会出现滚条 键盘弹出与使用transform属性的情况在是很常见的,所以需要谨慎使用position:fixed。 推荐使用flex flex,即弹性布局,兼容性较好,能够满足大部分布局需求。 ,在项目中重复造轮子是一件很不明智的事情;项目时我们可以借助第三方组件、插件提高我们的效率。 常用组件库 VantUI(https://youzan.github.io/vant/#/zh-CN/)是有赞源的一套轻量、可靠的Vue组件库;支持按需引入、主题定制、SSR,除了常用组件外,针对电商场景还有专门的业务组件

    8230

    web笔记

    通常我们再滑屏页面,会调用event的preventDefault()可以阻止默认情况的生:阻止页面滚 touchend——当手指离屏幕时触 touchcancel——系统停止跟踪触摸时候会触 例如在触摸过程中突然页面alert()一个提示框,此时会触该事件,这个事件比较少用 4、click屏幕产生200-300 ms的延迟响应 设备上的web网页是有300ms延迟的,玩玩会造成按钮点击延迟甚至是点击失效 ; /* 方法1 */   -webkit-appearance: none; /* 方法2 */ } 16、 快速回弹滚 我们先来看看回弹滚在手机浏览器展的历史: 早期的时候,的浏览器都不支持非 ) */ -ms-user-select: none; /* IE 10+ */ } 18、取消touch高亮效果 在做页面时,会现所有a标签在触点击时或者所有设置了伪类 fastclick 加快点击响应时间 animate.css CSS3画效果库 Normalize.css Normalize.css是一种现代的、CSS reset为HTML5准备的优质替代方案

    17020

    头部标签(HTML5 meta)

    中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析html代码 <! DOCTYPE html>  使用 HTML5 doctype,不区分大小写 <head lang=”en”> 标准的 lang 属性写法 <meta charset=’utf-8′>    声明文档使用的字符编码 meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”> 为设备添加

    57480

    和web前的区别

    既然都是前,两者肯定有紧密的联系,和web前其实都属于前的范围,目前前展的趋势就是大前,可以说是包罗万象,当然也就包含PC领域,而现在的前人员也已早就不是当年的切图仔了 所以不论是想做还是web前,这三样基础技术都必须熟练掌握。 和web前都属于前,那具体又有什么区别呢? 1、业务的应用场景 web前主要指传统的PC网页,页面主要是运行在PC浏览器中,出来的页面主要是运行在手机上;直观上会感觉,PC页面大一些,页面小一些,但是根据经验 2、新技术的使用 由于在主要以webkit内核为主,对于HTML5等新技术支持的更好,所以可以更大范围的使用新技术;而PC由于很多场景下要求兼容IE等老版本浏览器,出于浏览器兼容性的考虑,有些情况下限制了新技术的使用 3、页面的适配性 传统PC的页面一般都会选择给页面设定一个固定宽度,两侧有留白,但是的页面由于其载体手机屏幕比PC要小很多,一般都会选择尽可能多的在手机屏幕上显示内容,这就要求页面要能够充分适应各种屏幕尺寸的手机并进行最大程度的利用

    61500

    Flutter跨平台

    ---- Scaffold Widget and TabBar Widget(脚手架及切换组件) scaffold 是 Materrial 库中提供的一个脚手架,可以帮助者更快的完成功能页的 ---- 本篇到此完结,更多 Flutter 跨平台 原创内容持续更新中~ 期待您 关注 / 点赞 / 收藏 向着 大前工程师 晋级! ----

    42240

    相关产品

    • 移动金融开发平台

      移动金融开发平台

      腾讯移动金融开发平台(TMF)为银行、互联网金融、保险、证券客户提供一站式、覆盖全生命周期的移动金融服务。核心服务包括APP客户端开发组件、应用加固、环境安全检测等APP开发运营关键服务,帮助金融机构低成本、高效率地打造移动金融服务…...

    相关资讯

    热门标签

    扫码关注云+社区

    领取腾讯云代金券