随笔分类 -  html5

ios禁止页面下拉
摘要：document.querySelector('body').addEventListener('touchmove', function(e) { e.preventDefault(); }) 此类事件是手机touchmove默认事件行为，可以通过js代码禁止默认事件： 阅读全文
posted @ 2017-12-29 16:32 简单就好zyx 阅读(1907) 评论(0) 推荐(0)
移动端rem布局（阿里）
摘要：该方案使用相当简单，把下面这段已压缩过的 原生JS（源码已在文章底部更新，2017/5/3） 放到 HTML 的 head 标签中即可（注:不要手动设置viewport，该方案自动帮你设置） <script>!function(e){function t(a){if(i[a])return i[a] 阅读全文
posted @ 2017-05-09 14:20 简单就好zyx 阅读(447) 评论(0) 推荐(0)
rem : web app适配的秘密武器
摘要：css html { font-size: calc(100vw / 3.75) }jsdocument.documentElement.style.fontSize = $(document.documentElement).width()/3.75 + 'px'; $(window).on('r 阅读全文
posted @ 2017-03-13 10:28 简单就好zyx 阅读(149) 评论(0) 推荐(0)
placeholder文字颜色与是否显示兼容性
摘要：1.ie显示问题 <script type="text/javascript"> $(document).ready(function(){ var doc=document, inputs=doc.getElementsByTagName('input'), supportPlaceholder= 阅读全文
posted @ 2017-01-07 09:58 简单就好zyx 阅读(188) 评论(0) 推荐(0)
兼容问题大全
摘要：1.IOS下调取键盘后position:fixed;失效问题解决办法： 方法一: $(function(){ $('#phone').bind('focus',function(){ $('.bottom_fix').css('position','static'); //需要fixed定位的元素 阅读全文
posted @ 2016-10-31 09:30 简单就好zyx 阅读(127) 评论(0) 推荐(0)
左滑删除
摘要：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" id="viewport" content="width=device-width, initial-scale=1"><title>ht 阅读全文
posted @ 2016-09-22 15:16 简单就好zyx 阅读(149) 评论(0) 推荐(0)
html5添加音乐包括暂停
摘要：<audio id="musicfx" loop="loop" autoplay="autoplay"> <source src="Besame Mucho.mp3" type="audio/mpeg"> </audio> <!-- <img src="images/music.png" oncli 阅读全文
posted @ 2016-08-03 16:13 简单就好zyx 阅读(275) 评论(0) 推荐(0)
rem适配
摘要：//REM适配new function() { var _self = this; _self.width = 640; // 设置默认最大宽度 _self.fontSize = 100; // 默认字体大小 _self.widthProportion = function() { var p = 阅读全文
posted @ 2016-07-14 09:42 简单就好zyx 阅读(222) 评论(0) 推荐(0)
移动端a链接点击时取出背景色及边框
摘要：a{blr:expression(this.onFocus=this.blur())} :focus{outline:0;} /*去掉a标签的虚线框，避免出现奇怪的选中区域*/*{-webkit-tap-highlight-color:rgba(255,0,0,0); 阅读全文
posted @ 2016-07-14 09:41 简单就好zyx 阅读(395) 评论(0) 推荐(0)
html5引用公共头尾
摘要：<embed type="text/html" src="head.html" /> 阅读全文
posted @ 2016-05-03 16:40 简单就好zyx 阅读(830) 评论(0) 推荐(0)
html5头部说明
摘要：<!DOCTYPE html> <!-- 使用 HTML5 doctype，不区分大小写 --><html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa --><head> <!-- 声明文档使用的字符编码 --> <meta 阅读全文
posted @ 2016-03-17 09:43 简单就好zyx 阅读(762) 评论(0) 推荐(0)
h5固定表头公共样式
摘要：<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta content="yes" n 阅读全文
posted @ 2016-02-01 17:18 简单就好zyx 阅读(1936) 评论(0) 推荐(0)
移动端公共css样式
摘要：@media screen and ( min-width: 319px){html{ font-size: 100px;}}@media screen and ( min-width: 359px){html{ font-size: 106px;}}@media screen and ( min-... 阅读全文
posted @ 2016-01-26 14:40 简单就好zyx 阅读(534) 评论(0) 推荐(0)
canvas
摘要：canvas 阅读全文
posted @ 2015-07-03 18:20 简单就好zyx 阅读(96) 评论(0) 推荐(0)
html5新增标签
摘要：标签标记意义及用法分析/示例属性/属性值/描述定义独立的内容，如论坛帖子、报纸文章、博客条目、用户评论等内容。支持HTML5的全局属性和事件属性。定义两栏或多栏页面的侧边栏内容，如联系我们、客服、网站公告等内容。支持HTML5的全局属性和事件属性。定义音频内容，如音乐或其他音频流。autoplaya... 阅读全文
posted @ 2015-07-03 15:20 简单就好zyx 阅读(316) 评论(0) 推荐(0)