摘要: 智能手机发展确实很迅速,像今年,我的大部分工作就都在移动端网页上。 再往前些年,看到的手机版/移动版网页,限制于浏览器与手机性能,2g网络速度等 网页设计无非是蓝、黑、白,界面单调,并且要尽可能的设计简单。 现在情况就大不相同了,软件上webkit内核浏览器大行其道,硬件突飞猛进,网速来说,4g正炒 阅读全文
posted @ 2017-07-06 15:57 motian 阅读(730) 评论(0) 推荐(0) 编辑
摘要: posted @ 2014-11-24 20:09 vajoy 阅读(4708) 评论(12) 编辑 收藏 三个月前曾写过一篇跨终端响应式页面设计入门的博客,上了博客园头条也得到了不少关注,今天想在这篇博客的基础上,继续写一篇进阶的文章。 补充 基于“入门”一文,我想再补充几个基础知识点,主要都是针 阅读全文
posted @ 2017-07-06 15:56 motian 阅读(240) 评论(0) 推荐(0) 编辑
摘要: 1. IOS移动端click事件300ms的延迟响应 移动设备上的web网页是有300ms延迟的,玩玩会造成按钮点击延迟甚至是点击失效。这是由于区分单击事件和双击屏幕缩放的历史原因造成的, 2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示 阅读全文
posted @ 2017-07-06 15:53 motian 阅读(280) 评论(0) 推荐(0) 编辑
摘要: 许久没有写博客了,最近有个H5启动APP原生页面的需求,中间遇上一些坑,看了些网上的实现方案,特意来总结下 一、需要判断客户端的平台以及是否在微信浏览器中访问 1、客户端判断 在启动APP时,Android和IOS系统处理的方式是不一样的,Android这边由于开放,可以在浏览器中通过<a>标签以及 阅读全文
posted @ 2017-07-06 15:51 motian 阅读(802) 评论(0) 推荐(0) 编辑
摘要: 前端性能优化的方法? content方面 1,减少HTTP请求:合并文件、CSS精灵、inline Image 2,减少DNS查询:DNS查询完成之前浏览器不能从这个主机下载任何任何文件。方法:DNS缓存、将资源分布到恰当数量的主机名,平衡并行下载和DNS查询 3,避免重定向:多余的中间访问 4,使 阅读全文
posted @ 2017-07-06 15:47 motian 阅读(140) 评论(0) 推荐(0) 编辑
摘要: <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" /> width: viewport 的宽度 (范围从 200 到 10,000 ,默认为 980 像素 阅读全文
posted @ 2017-07-06 15:45 motian 阅读(162) 评论(0) 推荐(0) 编辑
摘要: .如果你把transform真的掌握的和纯熟的话,就可以直接通过CSS做出很多很炫酷的效果,甚至.轮播图和选项卡都可以通过CSS来做,咱们明天就说如何运用CSS来做轮播图,大家记得看哦! 很好,话不多说,翠花'上代码': 1 <!DOCTYPE html> 2 <html> 3 <head> 4 < 阅读全文
posted @ 2017-07-06 15:44 motian 阅读(904) 评论(0) 推荐(0) 编辑
摘要: html5 audio标签在ios 微信浏览器中是无法自动播放的,最近在做一个小的项目遇到这个问题,安卓和pc都是正常的,唯独ios不行,查阅了很多资料,找到了以下方法,也许不是最好用的方法,如果有更方便的方法,尽请留言: html部分: <audio id="audio"><source src= 阅读全文
posted @ 2017-07-06 15:42 motian 阅读(995) 评论(0) 推荐(0) 编辑
摘要: 一、css顺序 首先声明,浏览器读取css的方式是从上到下的。我们一般书写css只要元素具备这些属性就会达到我们预期的效果,但是这会给以后的维护和浏览器的渲染效率带来一定的影响,那么该怎么书写css的顺序呢?有没有一定的规范呢? 首先我们知道css的属性按特性分为几类; 1.规定元素特性,如disp 阅读全文
posted @ 2017-07-06 15:40 motian 阅读(131) 评论(0) 推荐(0) 编辑
摘要: html5提供了一个<canvas>标签,结合javascript的canvas api接口可以用来绘制图形和动画。最近工作中涉及到画图的任务,下面来了解一下canvas的基础:canvas画布。 1 <style type="text/css"> 2 body {padding: 40px 0 0 阅读全文
posted @ 2017-07-06 15:38 motian 阅读(266) 评论(0) 推荐(0) 编辑