文章分类 -  Mobile

响应式Web设计：HTML5和CSS3实战 读书笔记
摘要：响应式Web设计：HTML5和CSS3实战Responsive Web Design with HTML5 and CSS3By : Pandao pandao####vip.qq.comUpdateTime :2013-08-21目录第1章 HTML5、CSS3及响应式设计入门第2章 媒体查询：支... 阅读全文
posted @ 2014-11-05 14:40 luckc# 阅读(1099) 评论(0) 推荐(0)
跨终端响应式页面设计入门
摘要：跨终端/响应式页面不外乎是让各种分辨率的屏幕都能顺利阅读你的页面，常规来讲一个跨终端页面，在宽屏的电脑上看和在小屏幕手机上看的布局是不同的，布局不同的原因是为了让读者更好地阅读你的页面，见下图：这里有点要提到的是，我们常规会将PC版的页面和移动端设备的页面独立开来设计，这样会让PC端的页面布局更灵活... 阅读全文
posted @ 2014-08-13 12:49 luckc# 阅读(163) 评论(0) 推荐(0)
移动端重构系列12——popup
摘要：本系列文章，如果没有特别说明，兼容安卓4.0.4+popup分为两种：一种是内容比较多，直接以全屏显示，如图一；一种是少量内容的popup提示，如图二先上demo：popup测试popup page第一种形式，设计结构如下： ... 因为这种形式内容可能会比较长，有可能会... 阅读全文
posted @ 2014-08-11 15:29 luckc# 阅读(157) 评论(0) 推荐(0)
移动端重构系列11——弹窗modal
摘要：本系列文章，如果没有特别说明，兼容安卓4.0.4+设计结构如下： ... 前面的第n篇文章提过这个overlay遮罩层的问题，现在这里说明下为什么这么设计。一般来说看到的overlay都与modal是兄弟元素，而不是嵌套关系... 阅读全文
posted @ 2014-08-11 15:28 luckc# 阅读(231) 评论(0) 推荐(0)
移动端重构系列10——侧边栏导航
摘要：系列文章，如果没有特别说明，兼容安卓4.0.4+panel一般用来做侧边栏导航，铺满整屏高度，有两种展现形式：第一种直接盖在整块内容栏（包括header和footer部分）上面，如图一；第二种把整块内容栏推开panel的宽度，如图二设计结构如下： ...第一种实现方案：demo 1先将... 阅读全文
posted @ 2014-08-11 15:01 luckc# 阅读(353) 评论(0) 推荐(0)
移动端重构系列9——图片滚动
摘要：本系列文章，如果没有特别说明，兼容安卓4.0.4+这里我们采用swipe来做我们移动端的图片滚动滚动原理既然说到滚动，那跟我们上篇说到的iscroll多少有点关系吧。下面对swipe的滚动原理和iscroll的滚动原理简单分析下，以相同的结构为例： ... 阅读全文
posted @ 2014-08-11 14:02 luckc# 阅读(177) 评论(0) 推荐(0)
移动端重构系列8——滚动
摘要：本系列文章，如果没有特别说明，兼容安卓4.0.4+原生滚动原生滚动的属性为：-webkit-overflow-scrolling:touch;，如果是走高富帅的苹果路线，是没问题的，谁让这是人家亲生的呢；如果是安卓的话，我真不知道是支持还是不支持，说不支持吧好像有点缓动效果，说支持吧好像把这条属性砍... 阅读全文
posted @ 2014-08-11 13:56 luckc# 阅读(186) 评论(0) 推荐(0)
移动端重构系列7——图标
摘要：本系列文章，如果没有特别说明，兼容安卓4.0.4+这里我们把图标分为三种：背景图片，直接绘制，@font-face。如无特殊情况，图标的标签采用i标签背景图片首先我们会选择sprite形式，把所有的图标都放在一个大图中，然后考虑到retina屏，所以我们的图标应该设计为实际大小的2倍，然后设置bac... 阅读全文
posted @ 2014-08-11 13:55 luckc# 阅读(199) 评论(0) 推荐(0)
移动端重构系列6——切入切出动画
摘要：本系列文章，如果没有特别说明，兼容安卓4.0.4+因为后面的几篇文章都需要用到切入切出动画什么的，所以先把这个说下。为了简单起见，我们这里只讨论translate偏移动画（translate比起绝对定位的top/left/right/bottom要高效），而如其他的旋转缩放淡入淡出什么的道理都一样。... 阅读全文
posted @ 2014-08-11 13:54 luckc# 阅读(158) 评论(0) 推荐(0)
移动端重构系列5——等分，居中等
摘要：本系列文章，如果没有特别说明，兼容安卓4.0.4+之所以把本篇单独拿出来讲解，是因为这些在移动端使用的频率太高了，然后实现方法也不尽相同，而这里主要说下如何用flex和translate来实现。注：代码部分涉及到sass的mixin部分，在sandal的mixin文件中均有定义，可以直接使用。等分在... 阅读全文
posted @ 2014-08-11 13:52 luckc# 阅读(213) 评论(0) 推荐(0)
移动端重构系列4——重置样式
摘要：本系列文章，如果没有特别说明，兼容安卓4.0.4+，测试demo基于Normalize.css，根据目前我们大家的使用习惯进行了一些清零及移动端的特点添加一些基础样式。html { font-family: "Helvetica Neue", Helvetica, STHeiTi, Arial, s... 阅读全文
posted @ 2014-08-10 00:33 luckc# 阅读(128) 评论(0) 推荐(0)
移动端重构系列3——整体布局
摘要：一般来说,header和footer部分都为fixed定位，中间的内容区域可滚动。fixed布局常规的结构如下： ...因为移动端单页面特性，所以每个page为一个页面，然后整体使用wrap-page包裹。考虑到可滚动的为page内容，所以我们得给wrap-page一个具体的高... 阅读全文
posted @ 2014-08-10 00:32 luckc# 阅读(125) 评论(0) 推荐(0)
移动端重构系列2——新建空白页面
摘要：本系列文章，如果没有特别说明，兼容安卓4.0.4+，测试demohtml5文档申明 Documentmeta标签viewport视图窗口，移动端特属的标签。一般使用下面这段代码即可：上面的代码依次表示设置宽度为设备的宽度，默认不缩放，不允许用户缩放（即禁止缩放），在网页加载时隐藏地址栏... 阅读全文
posted @ 2014-08-10 00:26 luckc# 阅读(159) 评论(0) 推荐(0)
移动端重构系列1——前期准备工作
摘要：打开菜单栏，点击开发者，选择我们的响应式设计谷歌浏览器点击“show console”图标，打开模拟面板，使用"User Agent"，选择所要模拟的机子，点击emulate按钮模拟，刷新浏览器。如要调整横竖屏，切换到"screen"二维码扫描火狐中文版，地址栏右侧自带二维码扫描功能谷歌浏览器，可以... 阅读全文
posted @ 2014-08-10 00:22 luckc# 阅读(184) 评论(0) 推荐(0)
移动端重构系列13——页面切换
摘要：前面说的切入切出动画，一般用来前面的panel，popup，modal等效果，本篇主要说下整个页面的切换。布局，还是布局在分析页面滑动之前，我们再来讨论下之前的结构： ...现在我们要设计page是左右滑动，首先得保证各个page在同一水平线上吧。使元素处在同一水平线的... 阅读全文
posted @ 2014-08-10 00:09 luckc# 阅读(298) 评论(0) 推荐(0)
移动终端开发必备知识
摘要：移动设备的用户越来越多，每天android手机的激活量都已经超过130万台，所以我们面向移动终端的WebAPP也开始跟进了。本文主要介绍webapp的开发与调试的相关知识和经验，以及给出几种可选的解决方案。一、基本概念（1） CSS pixels与device pixelsCSS pixels： 浏... 阅读全文
posted @ 2014-07-24 09:39 luckc# 阅读(130) 评论(0) 推荐(0)
自适应网页设计（Responsive Web Design）
摘要：随着3G的普及，越来越多的人使用手机上网。移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达... 阅读全文
posted @ 2014-07-22 11:52 luckc# 阅读(87) 评论(0) 推荐(0)