响应式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 手机.大屏手机.平板电脑.桌面电脑.游戏控制台.电视.甚至是可穿戴设备,如此多的设备也形成了多种多样的屏幕尺寸.屏 ...
随机推荐
- 每天一杯C_Visual Studio各个版本的区别和总结
细致区别如上图所示 企业版点满图中技能树,能够提供点对点的解决方案,充分满足正规企业的要求. PS:技能最多,肯定也就价格最贵 专业版中提供的专业开发者工具.服务和订阅就成了最佳选择. PS:技能多, ...
- JAVA初学者——算数运算符
Hello!大家好,我是浩宇大熊猫,又是学习java的一天,开开森森~ 运算符:也就是对常量或者变量进行操作的符号 表达式:用运算符把常量或者变量连接起来符合java语法的式子就可以称为表达式,不同的 ...
- LeetCode——230. 二叉搜索树中第K小的元素
给定一个二叉搜索树,编写一个函数 kthSmallest 来查找其中第 k 个最小的元素. 说明: 你可以假设 k 总是有效的,1 ≤ k ≤ 二叉搜索树元素个数. 示例 1: 输入: root = ...
- Spring使用Rabbitmq (简单使用)
1.pom.xml jar包引用 <dependencies> <dependency> <groupId>org.springframework</grou ...
- openvino资源
Intel OpenVINO介紹及樹莓派.Linux的安裝 https://chtseng.wordpress.com/2019/01/21/intel-openvino%E4%BB%8B%E7%B4 ...
- win10 python 3.7 pip install tensorflow
环境: ide:pyCharm 2018.3.2 pyhton3.7 os:win10 64bit 步骤: 1.确认你的python有没有装pip,有则直接跳2.无则cmd到python安装目录下ea ...
- MySql索引机制
第一部分 MySQL数据库索引的数据结构及算法理论 第二部分 MySQL索引实现机制 第三部分 MySQL中高性能使用索引的策略 数据结构及算法 MySQL官方对索引的定义为:索引(Index)是帮助 ...
- Ubuntu源码编译安装tensorflow
ubuntu14 cuda9.0_384.81 驱动版本384.90 cudnn7.2 tensorflow1.8 https://blog.csdn.net/pkokocl/article/det ...
- Dynamics CRM - 通过 C# Plugin 来 abandon Business Process Flow
需求说明: 当一个 Entity 存在 Business Process Process 时,有时我们需要改变其状态,在之前写的博客有讲了可以通过 JavaScript 来实现,本篇就来讲一下如何通过 ...
- Django整体架构
Django整体架构 用户能够访问到的所有的资源 都是程序员提前暴露好的, 如果没有暴露 用户就永远访问不了 用户能够访问到的所有的资源 都是程序员提前暴露好的, 如果没有暴露 用户就永远访问不了 一 ...