随笔分类 -  移动端重构系列

移动端重构系列-移动端html页面优化
摘要：对于访问量大的网站来说，前端的优化是必须的，即使是优化1KB的大小对其影响也很大，下面来看看来自ISUX的米随随讲讲移动手机平台的HTML5前端优化，或许对你有帮助和启发。概述 1. PC优化手段在Mobile侧同样适用 2. 在Mobile侧我们提出三秒种渲染完成首屏指标 3. 基于第二点，... 阅读全文
posted @ 2015-02-06 18:04 chenguiya 阅读(366) 评论(0) 推荐(0) 编辑
移动端重构系列12-页面切换
摘要：忘记哦为饿哦接入网 阅读全文
posted @ 2015-01-16 18:47 chenguiya 编辑
移动端重构系列11-popup
摘要：popup分为两种：一种是内容比较多，直接以全屏显示，如图一；一种是少量内容的popup提示，如图二查看效果有：http://jsbin.com/retag/2/popup page设计结构： ... 因为这种形式内容可能会比较长，有可能会有滚动效果，所以头部（含有关闭按... 阅读全文
posted @ 2015-01-16 15:37 chenguiya 编辑
移动端重构系列10-弹窗modal
摘要：本系列文章，如果没有特别说明，兼容安卓4.0.4+ 设计结构如下： ... 对于高大上的移动端来说，都是rgba时代，所以opacity在移动端很少用；既然这个对子元素的影响已经不是问题，那么嵌套关系就可以成立，而且嵌套... 阅读全文
posted @ 2015-01-05 16:12 chenguiya 编辑
移动端重构系列9-侧边栏导航
摘要：panel一般用来做侧边栏导航，铺满整屏高度，有两种展现形式：第一种直接盖在整块内容栏（包括header和footer部分）上面，如图一；第二种把整块内容栏推开panel的宽度，如图二 设计结构如下： ...第一种实现方案：demo 1先将panel通过translate偏移负... 阅读全文
posted @ 2015-01-04 18:28 chenguiya 编辑
移动端重构系列8-图片滚动
摘要：这里我们采用swipe来做我们移动端的图片滚动滚动原理既然说到滚动，那跟我们上篇说到的iscroll多少有点关系吧。下面对swipe的滚动原理和iscroll的滚动原理简单分析下，以相同的结构为例： ... 相同的是都需要一个可以设置ove... 阅读全文
posted @ 2015-01-04 14:57 chenguiya 编辑
移动端重构系列7-滚动
摘要：原生滚动原生滚动的属性为：-webkit-overflow-scrolling:touch;如果是苹果系统的话，这个是没问题的，如果是安卓的话，当你添加或者删除这个属性对比下，好像没什么差别原生滚动支持测试：overflow-scrolling 测试1overflow-scrolling 测试2HT... 阅读全文
posted @ 2015-01-04 11:47 chenguiya 编辑
移动端重构系列6-图标
摘要：本系列文章，如果没有特别说明，兼容安卓4.0.4+这里我们把图标分为三种：背景图片，直接绘制，@font-face。如无特殊情况，图标的标签采用i标签背景图片首先我们会选择sprite形式，把所有的图标都放在一个大图中，然后考虑到retina屏，所以我们的图标应该设计为实际大小的2倍，然后设置bac... 阅读全文
posted @ 2014-12-29 18:28 chenguiya 编辑
移动端重构系列5-等分、居中等
摘要：本系列文章，如果没有特别说明，兼容安卓4.0.4+之所以把本篇单独拿出来讲解，是因为这些在移动端使用的频率太高了，然后实现方法也不尽相同，而这里主要说下如何用flex和translate来实现。注：代码部分涉及到sass的mixin部分，在sandal的mixin文件中均有定义，可以直接使用。等分在... 阅读全文
posted @ 2014-12-26 16:18 chenguiya 编辑
移动端重构系列4-重置样式
摘要：本系列文章，如果没有特别说明，兼容安卓4.0.4+，测试demo基于Normalize.css，根据目前我们大家的使用习惯进行了一些清零及移动端的特点添加一些基础样式。html { font-family: "Helvetica Neue", Helvetica, STHeiTi, Arial, s... 阅读全文
posted @ 2014-12-26 15:20 chenguiya 编辑
移动端重构系列3-整体布局
摘要：本系列文章，如果没有特别说明，兼容安卓4.0.4+，测试demo移动端和pc端一样整体上布局也可以分为上中下三部分，如图：一般来说,header和footer部分都为fixed定位，中间的内容区域可滚动。fixed布局常规的结构如下： ...因为移动端单页面特性，所以每个pag... 阅读全文
posted @ 2014-12-26 11:53 chenguiya 编辑
移动端重构系列2-html5文档申明
摘要：html5文档申明 Documentmeta标签viewport视图窗口，移动端特属的标签。一般使用下面这段代码即可：上面的代码依次表示设置宽度为设备的宽度，默认不缩放，不允许用户缩放（即禁止缩放），在网页加载时隐藏地址栏与导航栏（ios7.1新增）。width – // [pixel... 阅读全文
posted @ 2014-12-25 17:32 chenguiya 编辑
移动端重构系列1-浏览器调试准备工作
摘要：本系列文章，如果没有特别说明，兼容安卓4.0.4+pc端响应式开发火狐浏览器打开菜单栏，点击开发者，选择我们的响应式设计 谷歌浏览器点击“show console”图标，打开模拟面板，使用"User Agent"，选择所要模拟的机子，点击emulate按钮模拟，刷新浏览器... 阅读全文
posted @ 2014-12-25 16:49 chenguiya 编辑

点击右上角即可分享
微信分享提示