响应式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
