响应式WEB页面开发实践
转自：https://github.com/markyun/My-blog/issues/27
最近得到一个新任务单，让我用一套页面适应所有主流终端（Android、iPhone、iPad、PC），而且是一套页面写。 我得到任何的第一感觉就是用2套页面吧；PC和iPad一套，手机一套。才好实现吧！
但最后要求只用一套完成。虽然给开发经理说了2套页面的优势。没有办法，谁让我们还不是决策层呢， 硬着头皮开始做。原来也没有移动端开发的经验，我也只有慢慢摸索，从头做起。简要记录一下开发过程。
需要概要是这样的：（具体需求其实还不够清晰，改动挺多 ， 只兼容IE8以上浏览器）
1、在PC上显示正常PC的布局，
有些炫酷的动效 我选用了CSS3技术为主，CSS不能实现的就用JS来完成，因为transform 这些好玩的东东可以直接使用GPU加速。比JS好多了。 尽量保证动画效果的平滑与自然。底层框架依赖于jQuery 来实现其他交互和验证功能，PC页面开发根据设计图完成，相当来说最简单。
2、在ipad上则针对ipad设备横屏竖屏进行显示优化，这个比较简单，使用 Media Queries 根据设备的max-device-width来应用不同样式。后期重构还需要根据屏幕大小和 Retina 加载适应的图片。
3、在Android、IOS上模拟webapp的UI和布局， 这块内容是最复杂的，要测很多个设备、写大堆兼容性代码、在手机自带的浏览器上保证显示效果一致。 目前这块还没有做完，由于设计图布局与PC、ipad的布局区别太大，UI、交互效果都变了。很是纠结。不断在各种尝试，能不能在做的更好一点。
当然啦，一套页面适应所有主流终端是页面代码是十分臃肿的！！！ 我借鉴了bootstrap 的响应式布局方式，用了.hidden-desktop 、.hidden-phone的隐藏元素方式，来解决相同功能的组件在PC与webapp布局位置不一样的问题。但是一些动画在普通的手机浏览器上性能非常不好，有待优化。另外因为各种尺寸不同的，让页面自适应也会让页面显示效果不能跟效果图100%一致。影响了设计。
具体的代码片段：
HTML
<head>
<title>Home</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection"content="telephone=no, email=no" />
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" media="screen and (max-device-width: 979px)" href="assets/css/pad.css">
<link rel="stylesheet" media="screen and (max-device-width: 400px)" href="assets/css/phone.css">
</head>
CSS
/* 大屏幕开始启动了*/
@media all and (min-width: 1200px) {
.nav li{
width: 160px;
}
}
/*手机横屏到竖屏 到常规屏幕 ipad*/
@media (min-width: 768px) and (max-width: 979px) {
.hidden-desktop {
display: inherit !important;
}
.visible-desktop {
display: none !important ;
}
.visible-tablet {
display: inherit !important;
}
.hidden-tablet {
display: none !important;
}
}
/*手机横屏和平板竖屏幕*/
@media (min-width: 400px)and (max-width: 768px) {
.hidden-desktop {
display: inherit !important;
}
.visible-desktop {
display: none !important;
}
.visible-phone {
display: inherit !important;
}
.hidden-phone {
display: none !important;
}
}
/* 针对iPhone5 横屏和竖屏样式 */
@media (min-device-width : 320px) and (max-device-width : 568px) {
//
}
JavaScript
移动端侧滑菜单，使用了codrops的 sidebarEffects组件。完美兼容各种浏览器。
`
function init() {
var container = document.getElementById( 'st-container' ),
buttons = Array.prototype.slice.call( document.querySelectorAll( '#st-trigger-effects > button' ) ),
// event type (if mobile use touch events)
eventtype = mobilecheck() ? 'touchstart' : 'click',
resetMenu = function() {
classie.remove( container, 'st-menu-open' );
},
bodyClickFn = function(evt) {
if( !hasParentClass( evt.target, 'st-menu' ) ) {
resetMenu();
document.removeEventListener( eventtype, bodyClickFn );
}
};
buttons.forEach( function( el, i ) {
var effect = el.getAttribute( 'data-effect' );
el.addEventListener( eventtype, function( ev ) {
ev.stopPropagation();
ev.preventDefault();
container.className = 'st-container'; // clear
classie.add( container, effect );
setTimeout( function() {
classie.add( container, 'st-menu-open' );
$("nav").eq(1).addClass('open');
}, 25 );
document.addEventListener( eventtype, bodyClickFn );
});
} );
}
init();`
PC端导航菜单，当屏幕小于指定大小后菜单竖列显示，并隐藏
$("#mobile-nav").click(function() {
$(this).toggleClass('open');
$('nav').toggleClass('open');
$('body').toggleClass('nav-open');
});
$('article').click(function() {
$('nav').removeClass('open');
$('body').removeClass('nav-open');
});
2014/8/9 14:42:07
响应式WEB页面开发实践的更多相关文章
- 响应式web布局设计实战总结教程
响应性web设计的理念是:页面的设计与开发应当根据用户行为与设备环境(包括系统平台,屏幕尺寸,屏幕定向等)进行相应的响应及调整.具体的实践方式由多方面组成,包括弹性网格和布局,图片,css Media ...
- HTML5、CSS3与响应式Web设计入门(2)
HTML5的宽泛含义开拓了Web开发的视野,增加了开发方案的多样性,同时也带给很多Web开发者不小的困惑,就是HTML5在涉及到Web某个应用领 域的开发时,到底代表了什么?本篇文章的目的就在于跟大伙 ...
- 《响应式Web设计实践》学习笔记
原书: 响应式Web设计实践 目录: 第2章 流动布局 1. 布局选项 2. 字体大小 3. 网格布局 4. 混合固定宽度和流动宽度 第3章 媒介查询 1. 视口 2. 媒介查询结构 3. 内嵌样式与 ...
- Web开发——HTML基础（HTML响应式Web设计 Bootstrap）
参考: 参考:http://www.bootcss.com/ 目录: 1.什么是响应式 Web 设计? 2.创建自己的响应设计 3.使用 Bootstrap 1.什么是响应式 Web 设计? RWD ...
- 响应式web开发的一些文章
CSS Device Adaptation:关注 W3C 建议的 CSS 设备适配标准. “在 CSS 中使用 LESS 实现更多的功能”(作者:Uche Ogbuji,developerWorks, ...
- 响应式Web设计 – 布局
写在前面 去年上半年,我开始着手推动项目中响应式设计的落地.以官网优化需求为契机,主动去做了响应式的页面设计,也说服了产品.设计和开发的相关同事一起把它上线落实,但不幸的是,由于各种方面的原因,比如, ...
- 响应式Web设计(Responsive Web design)
中文名 响应式Web设计 提出时间 2010年5月 英 文 Responsive Web design 解 释 一个网站能够兼容多个终端 目 的 解决移动互联网的浏览 优 点 ...
- 什么是响应式Web设计？怎样进行？
http://beforweb.com/node/6/page/0/3 开始第一篇.老规矩,先无聊的谈论天气一类的话题.十一长假,天气也终于开始有些秋天的味道,坐在屋里甚至觉得需要热咖啡.话说两年前也 ...
- 响应式Web设计基础
本文所有内容来自Responsive Web Design Fundamentals 手机.大屏手机.平板电脑.桌面电脑.游戏控制台.电视.甚至是可穿戴设备,如此多的设备也形成了多种多样的屏幕尺寸.屏 ...
随机推荐
- Tensorflow函数——tf.set_random_seed(seed)
设置图级随机seed. 依赖于随机seed的操作实际上从两个seed中获取:图级和操作级seed. 这将设置图级别的seed. 其与操作级seed的相互作用如下: 1.如果没有设置图形级别和操作see ...
- ssh登录脚本
#!/usr/bin/expect set timeout 100 set passwd "your password" spawn shell expect "key& ...
- day61-mysql-索引原理和慢查询优化
ProgramData是C盘隐藏的文件夹,mysql的data文件夹在里面,C:\ProgramData\MySQL\MySQL Server 8.0\Data 一.存储引擎 重点[面试题]: inn ...
- JavaScript详解（二）
js的流程控制 if语句: if (条件表达式A){ xx; }else if (条件表达式B){ xx; } else{ xx; } switch语句: switch (表达式){ case 值1: ...
- Mysql存储过程案例集合
注:使用的工具为SQLyog 壹.while简单使用(替换字符串中的字符,和REPLACE效果一样) 注: 这里没有使用REPLACE函数 1.创建存储过程 DROP PROCEDURE IF EXI ...
- 吴裕雄--天生自然 pythonTensorFlow自然语言处理：Seq2Seq模型--训练
import tensorflow as tf # 1.参数设置. # 假设输入数据已经用9.2.1小节中的方法转换成了单词编号的格式. SRC_TRAIN_DATA = "F:\\Tens ...
- istio介绍
核心架构 解决的问题 故障排查 1. 这个请求在哪里失败了?A有调用B吗? 2. 为什么用户的请求/页面hung住了? 3. 为什么系统这么慢?那个组件最慢? 应用容错性 1. 客户端没有配置 ...
- Kubernetes系列二: 使用kubeadm安装k8s环境
环境 三台主机,一台master,两台node 作为master 作为node节点 作为node节点 每台主机Centos版本使用 CentOS Linux release 7.6.1810 (Cor ...
- 蓝桥杯练习Day 2
问题描述 Fibonacci数列的递推公式为:Fn=Fn-1+Fn-2,其中F1=F2=1. 当n比较大时,Fn也非常大,现在我们想知道,Fn除以10007的余数是多少. 输入格式 输入包含一个整数n ...
- matplotlib学习——设置线条颜色及形状
在图形表示中,不同的画布或画布中不同的函数,我们常常要用不同的形状或颜色来区分开,这里小编向大家介绍这些参数的表示方法: 一.控制颜色 b--blue c--cyan(青色) ...