12 2014 档案

移动端重构系列6-图标

摘要：本系列文章，如果没有特别说明，兼容安卓4.0.4+这里我们把图标分为三种：背景图片，直接绘制，@font-face。如无特殊情况，图标的标签采用i标签背景图片首先我们会选择sprite形式，把所有的图标都放在一个大图中，然后考虑到retina屏，所以我们的图标应该设计为实际大小的2倍，然后设置bac... 阅读全文

posted @ 2014-12-29 18:28 chenguiya 编辑

display:-webkit-flex(flex等分)、display: table（table等分）、justify-content: center（flex居中）、transform: translate（translate居中）、justify-content（横轴两端对齐）、align-content（垂直对齐方式）

摘要：justify-content 定义伸缩项目沿主轴线的对齐方式取值：flex-start ：默认值，向一行的其实位置靠齐flex-end ：伸缩项目向一行的结束位置靠齐center ：伸缩项目向一行的中间位置靠齐space-between ：两端对齐，项目之间的间隔都相等。space-around：阅读全文

posted @ 2014-12-26 17:19 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 编辑

-moz-transition:background 2s ease（平滑过渡，逐渐变慢动画）

摘要：需求：1、鼠标移到图片上方，图片平滑向上移动49像素，鼠标移开图片之后，图片平滑向下移动49像素；动画效果：页面展示效果为：HTML结构为：transition动画 ... 阅读全文

posted @ 2014-12-23 16:38 chenguiya 编辑

标题前面的标点符号能显示正常

摘要：如图：HTML结构： ·埃尔克森飙升中超身价榜第一 TOP5恒大占三 ·埃尔克森入选亚冠最佳阵容鲁能洛维入围候选名单 ·埃里克森坦言最怕埃尔克森广州德比必精彩无疑 ·中超最强锋线之争埃尔克森PK哈默德谁才是王中王 ... 阅读全文

posted @ 2014-12-22 15:01 chenguiya 编辑