随笔分类 - html5

html5新特性

摘要：1，我们需要做的是画线。2，循环调用画线实现动画效果。3，将像素设置高调节毛边。完整代码：阅读全文

posted @ 2018-03-13 16:22 艾路阅读(322) 评论(0) 推荐(0) 编辑

摘要：SVG是响应式设计中十分重要的一项技术。它是一种不会过时的、能够轻松解决多屏幕分辨率问题的技术。 web领域中的图像，png,jpg都是它们的可视数据保存为像素形式。放在两倍宽高上，就会有局限性。除了最小的图片资源，如果可能的话，使用svg替换png。这样可以产生和分辨率无关的图片，而且大小也比位图阅读全文

posted @ 2018-02-06 16:58 艾路阅读(144) 评论(0) 推荐(0) 编辑

2018前端学习路线

摘要：引用：https://github.com/kamranahmedse/developer-roadmap 引言：前端路线图后端路线图 DevOps路线图阅读全文

posted @ 2018-01-18 16:06 艾路阅读(354) 评论(0) 推荐(0) 编辑

媒体查询以及flexbox，响应式图片

摘要：媒体查询包含媒体类型和零个或多个检测媒体特性的表达式。width.height和color都是可用于媒体查询的特性。使用媒体查询，可以不必修改内容本身，而让网页适应不同的设备。媒体查询的使用方式：在css文件输入@media screen。在Link标签中使用媒体查询。<link rel="sty 阅读全文

posted @ 2018-01-04 16:40 艾路阅读(547) 评论(0) 推荐(0) 编辑

gif safari img标签播放mp4

摘要：gif可以实现动态效果，但是质量和性能不好。gif采用8位压缩，最多只能处理256种颜色。gif对网络性能来说糟糕。它们体积庞大，需要更多的CPU和内存资源来重新绘制，是电池杀手。 gif也有许多优点：它们由浏览器预加载立即请求的，它会自动播放和循环播放，而且是无声的。使用video标签可以实现效阅读全文

posted @ 2017-12-13 11:15 艾路阅读(1368) 评论(0) 推荐(0) 编辑

网页当前滚动位置

摘要：浏览器兼容问题会导致document.body.scrollTop或者document.documentElement.scrollTop永远为0，那我们做个判断，然后赋值就可以了。阅读全文

posted @ 2017-12-04 18:38 艾路阅读(236) 评论(0) 推荐(0) 编辑

网页自适应的几种方式。

摘要：微信小程序的像素大小使用rpx，rpx换算px屏幕宽度/750。传统的自适应布局有几种：响应式，根据屏幕大小配置多个样式文件。使用em,rem.rem是页面的font-size尺寸，不同的页面设置不同的font-size。使用百分比或者flex，铺满屏幕，高度字体还使用px. scale通过阅读全文

posted @ 2017-12-04 18:35 艾路阅读(2529) 评论(0) 推荐(0) 编辑

iphone x 网页兼容

摘要：默认的显示内容在安全区域，不会在圆角和设备的传感器内显示。第一个新功能是扩展到现有的视区 meta 标记, 称为视区匹配, 它提供对镶行为的控制。视区适合在 iOS 11 中提供。设置viewport-fit可以全屏显示。设置完viewport-fit=cover后，会发现title位置上移，这阅读全文

posted @ 2017-11-17 14:24 艾路阅读(235) 评论(0) 推荐(0) 编辑

chrome 手机debugger模式 width超出

摘要：添加 user-scalable=0 即可。阅读全文

posted @ 2017-06-30 12:43 艾路阅读(150) 评论(0) 推荐(0) 编辑

html5 画布属性以及快捷模块

摘要：创建循环使用的创建圆角矩形函数：阅读全文

posted @ 2016-10-11 21:29 艾路阅读(115) 评论(0) 推荐(0) 编辑

HTML5 表单 input属性以及验证

摘要：autofocus属性可以在页面loading完后，自动将光标固定在Input元素上。 placeholder属性可以给予用户一个快速提示，它并不会取代标签元素。 required是一个布尔型属性，包含此属性的表单元素必须被填写。元素Mete被作用于图形化表示已知范围内的测量标准。元素progr 阅读全文

posted @ 2016-10-10 23:50 艾路阅读(603) 评论(0) 推荐(0) 编辑