拿到设计稿后，如何进行布局还原？如果只需要做非精确的响应式设计，那么使用媒体查询来实现就 OK 了。如果需要精确还原设计稿，则一般通过缩放来实现。常见方案有基于 viewport 和基于 rem 的缩放方案。本文主要介绍了详解H5 活动页之移动端 REM 布局适配方法的相关资料，希望能帮助到大家。1 viewport 缩放方案在移动端，可以通过 viewport 缩放页面大小比率达到目的。简单来说，即所有宽高像素与视觉稿输出相同，然后通过页面宽...
通常在写HTML5手机端页面的时候，我们会发现页面所显示元素的比例不正确，那此时我们需要添加的就是：<meta name="viewport" content="width=device-width,initial-scale=1">或者是<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />那么我们来对这句话解释一下就是：viewport ： 表示的是显示窗口；width=device-width,initial-scale=1.0 ： 表...
这篇文章主要介绍了详解使用HTML5的classList属性操作CSS类,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧前言以前我们有需要用js或jquery的一些方法hasClass、addClass、removeClass，在一个元素的class属性上添加或者删除某几个类，达到某种样式变化的需求，但还是稍微麻烦了一些。h5新增的classList可以让我们更方便的元素的类名进行操作。注意classList兼容性有些差，不兼容ie10以下的ie浏览器...
前言Notification API 是 HTML5 新增的桌面通知 API，用于向用户显示通知信息。该通知是脱离浏览器的，即使用户没有停留在当前标签页，甚至最小化了浏览器，该通知信息也一样会置顶显示出来。用户权限想要向用户显示通知消息，需要获取用户权限，而相同的域名只需要获取一次权限。只有用户允许的权限下，Notification 才能起到作用，避免某些网站的广告滥用 Notification 或其它给用户造成影响。那么如何知道用户到底是允不允许的？...
本篇文章主要介绍了HTML5 FormData 方法介绍以及实现文件上传示例，具有一定的参考价值，有兴趣的可以了解一下XMLHttpRequest 是一个浏览器接口，通过它，我们可以使得 Javascript 进行 HTTP (S) 通信。XMLHttpRequest 在现在浏览器中是一种常用的前后台交互数据的方式。2008年 2 月，XMLHttpRequest Level 2 草案提出来了，相对于上一代，它有一些新的特性，其中 FormData 就是 XMLHttpRequest Level 2 新增的一个对象，利用它来提...
本篇文章主要介绍了html5教你做炫酷的碎片式图片切换 (canvas) ，具有一定参考价值，有兴趣的可以了解一下前言老规矩，先上源码。图片区域是可以点击的，动画会从点击的位置开始发生。本来这个效果是我3年前做的，只是当是是用无数个 p 标签完成的，性能比较成问题，在移动端完全跑不动。最近心血来潮想学习一个做 CSS 效果很厉害的大神用纯 CSS 实现，无奈功力不够只能放弃，最终选择用 canvas 来完成了。准备工作1. 首先准备相同...
canvas loading...在canvas中显示图片非常简单。可以通过修正层为图片添加印章、拉伸图片或者修改图片等，并且图片通常会成为canvas上的焦点。用HTML5 Canvas API内置的几个简单命令可以轻松地为canvas添加图片内容。不过，图片增加了canvas操作的复杂度：必须等到图片完全加载后才能对其进行操作。浏览器通常会在页面脚本执行的同时异步加载图片。如果试图在图片未完全加载之前就将其呈现到canvas上，那么canvas将不会显示任何图片...
Audio对象属性： volume 描述：设置或返回音频的音量，取值范围（0——1）下面是我做的音乐播放器如何调节音频音量的代码：//增加切换音量事件 (function(){var height = $("#myAudio ul.control li.volume .alert-box .volume-wrap .bar .scroll-bar").height();$("#myAudio ul.control li.volume .alert-box .volume-wrap .bar .scroll-bar .scroll-btn").on("mousedown",function(e){e.preventDefault();var downHeight = $("#m...
这篇文章主要介绍了H5调用相机拍照并压缩图片的实例代码,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧整理文档，搜刮出一个H5调用相机拍照并压缩图片的实例代码，稍微整理精简一下做下分享。背景最近要做一个h5的页面，主要功能就是调用相机拍照或者是相册选图并且把照片压缩转base64之后上传到后台服务器，然后服务器返回识别结果。前端的主要功能点有：H5如何调用相机图片如何压缩图片转base64H...
最近看到vue-router的HTML5 History 模式路由的实现，然后顺便又去研究了一下HTML5 的 History，以下是自己的一些理解，顺便用jquery写 一个实现类似vue-router里面HTML5 History 模式路由器,以达到练练手，熟悉熟悉的目的。一、history.pushStatehistory.pushState(state, title, url); 上面第一和第二个参数可以为空，主要就是第三个参数，表示新历史纪录的地址，浏览器在调用pushState()方法后不会去加载这个URL，新的URL不一定...
HTML5中的script属性： script 标签在HTML5中除了具备HTML5新标准定义的属性以外，和HTML4.01相比移除了language属性，修改了type属性为可选的（默认text/javascript），并新增了一个属性async。 async :boolean, 属性的作用，定义脚本是否异步执行，取值true或false。 如果 async 设为 true ，会忽略 defer 属性。 异步执行的 js 文件被假定为不使用 document.write() 向加载中的 document 写入内容，因此不要在 异步执行的 js 文...
HTML5提供专门的拖拽与拖放的API，以后实现这类效果就不必乱折腾了。但是，考虑到Opera浏览器似乎对此不感冒，在通用性上有待商榷，所以这里也就简单说一说。拖放（Drag 和 drop）是 html5 标准的组成部分。浏览器支持Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。被拖元素，dragElement :1、添加事件：ondragstart2、添加属性：dragable放置元素，dropElement:1、添加事件：ondargenter , ondragover...
移动端的工作已经越来越成为前端工作的重要内容，除了平常的项目开发，HTML 头部标签功能，特别是meta标签显得非常重要。HTML文档的head部分，通常包括指定页面标题，为搜索引擎提供关于页面本身的信息，加载样式表，以及加载JavaScript文件（出于性能考虑，多数时候放在页面底部</body>标签结束前加载JavaScript）。除了title，head里的内容对页面访问者来说都是不可见的.下面是HTML文档head部分的一个例子：<head> <meta charse...
他们可以存储： 数组 json数据 图片 脚本 样式文件 ； 客户端的存储的两个： 1.localStorage 没时间限制的数据存储（） 方法有：.localStrage.getItem();localStrage.setItem();removeItem();localStrage.key()从0开始;.localStrage,clear();用它来存储图片需要通过一层canvas，大小和图片一致，渲染到canvas中，利用canvas的toDateURL()的方法存储到本地，用try()catch(e){},通过本地获取缓存数据并且渲染。 ...
svg的几个小案例最近经常用到svg，闲的无聊的时候做了几个简单的小例子，希望能帮到大家，svg会用了之后做动画和图片都方便了好多，接下来就看看小例子吧！！1、例子一css代码html, body {width: 100%;height: 100%;}body {background: #131518;}#patt1 path {stroke: #ff509e;}#patt2 path {stroke: #95d13c;}#patt3 path {stroke: #00b6cb;}#patt4 path {stroke: #9753e1;}#mask1 rect {-webkit-animation: pulse 1.90476s infin...