刚做完几个简单的响应式设计的网站项目下来,杂七杂八 (二)
2014-07-10 14:44
232 查看
用户背景情况
1、要求支持IE7以上,chrome,safari,firefox
2、要求在Win XP、Win 7、ipad、iphone或者Android移动设备上浏览
3、项目不需要CMS
团队情况
前端主要用Jquery及相关插件进行快速开发
后端比较熟悉C#.Net,php
项目版本控制
TortoiseSVN
最终技术选型
前端:jquery, jquery.tools做slideshow, jqXMLUtils.js处理XML文件(部分页面内容可配置到XML文件里面),团队以前积累下来的用jquery写好的slidebar 和map插件,部分地方用到CSS3的border-radius设设圆角,.net 的webpage简单好用。
后端:没有CMS,主要是静态页面及一个发送邮件程序,于是选择了比较熟悉的.net作为后台进行开发,2个人非fulltime开发,周期1个月。
解决问题的思路
一开始就自己按查询到的资料做了些简单的静态html页面测试一下。
要实现响应式的话,在移动设备先对设备显示比例作大小限制,不管你移动设备分辩率多高,宽高所见即所得并且不能改变大小。
响应式设计,我们计划做3个模版,large(浏览器宽度大于1118px)/middle(700px~1118px)/small(<700px),网上搜资料被提得最多的是用CSS3的media-query 如下:
但这里面有个问题就是IE7,IE8都不支持,这时网上查询可以引入css3-mediaqueries.js文件和PIE.js解决这些CSS3问题,但现在又出现了一个新问题,就是客户要求在手机设备中打开时要求页面要刚好占满手机浏览器,这就要涉及到在不同宽度的手机屏幕上都要按比例来灵活设置网页元素的比例来适应。
于是由于时间紧迫就想到了用JS来动态设置,并抛弃了media query,用JS/Jquery来实现,主要思路如下:
按这种思路来处理,页面的兼容性很好,QA各种操作系统,各种浏览器,各种移动设备测试都pass了。第一个网站搞下来后,后面几个网站同理如法炮制,优化了代码,优化了图片的预载等等,做起来更加顺手,更快完成
1、要求支持IE7以上,chrome,safari,firefox
2、要求在Win XP、Win 7、ipad、iphone或者Android移动设备上浏览
3、项目不需要CMS
团队情况
前端主要用Jquery及相关插件进行快速开发
后端比较熟悉C#.Net,php
项目版本控制
TortoiseSVN
最终技术选型
前端:jquery, jquery.tools做slideshow, jqXMLUtils.js处理XML文件(部分页面内容可配置到XML文件里面),团队以前积累下来的用jquery写好的slidebar 和map插件,部分地方用到CSS3的border-radius设设圆角,.net 的webpage简单好用。
后端:没有CMS,主要是静态页面及一个发送邮件程序,于是选择了比较熟悉的.net作为后台进行开发,2个人非fulltime开发,周期1个月。
解决问题的思路
一开始就自己按查询到的资料做了些简单的静态html页面测试一下。
要实现响应式的话,在移动设备先对设备显示比例作大小限制,不管你移动设备分辩率多高,宽高所见即所得并且不能改变大小。
<meta name="viewport" id="yourViewportID" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
响应式设计,我们计划做3个模版,large(浏览器宽度大于1118px)/middle(700px~1118px)/small(<700px),网上搜资料被提得最多的是用CSS3的media-query 如下:
@media screen and (max-width: 1118px) { /*add your css styles here*/ } @media screen and (max-width: 700px) { /*add your css styles here*/ } @media screen and (max-width: 400px) { /*add your css styles here*/ }
但这里面有个问题就是IE7,IE8都不支持,这时网上查询可以引入css3-mediaqueries.js文件和PIE.js解决这些CSS3问题,但现在又出现了一个新问题,就是客户要求在手机设备中打开时要求页面要刚好占满手机浏览器,这就要涉及到在不同宽度的手机屏幕上都要按比例来灵活设置网页元素的比例来适应。
于是由于时间紧迫就想到了用JS来动态设置,并抛弃了media query,用JS/Jquery来实现,主要思路如下:
var browser_width = $(window).width(); var isMobile = { Android: function() { return navigator.userAgent.match(/Android/i); }, BlackBerry: function() { return navigator.userAgent.match(/BlackBerry/i); }, iOS: function() { return navigator.userAgent.match(/iPhone|iPad|iPod/i); }, Opera: function() { return navigator.userAgent.match(/Opera Mini/i); }, Windows: function() { return navigator.userAgent.match(/IEMobile/i); }, any: function() { return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows()); } }; jQuery(document).ready(function() { var browser_width = $(window).width(); if (isMobile.any()) { if (browser_width < 700) { var scale = browser_width / 400;/*获取比例,要动态设置各手机的元素的样式以达到满屏显示*/ setMobileTemplate(scale); } } else if (browser_width > 700 && browser_width < 1118) { setMiddleTemplate(); } else if (browser_width > 1118) { setLargeTemplate(); } } else { if (browser_width > 1118) { setLargeTemplate(); } else if (browser_width > 700) { setMiddleTemplate(); } else { setSmallTemplate(); } } }); var resizeFlag = 0; $(window).resize(function() { var browser_width = $(window).width(); setTimeout(function() { var browser_width = $(window).width(); if (browser_width > 1118) { if (resizeFlag != 1) { setLargeTemplate(); resizeFlag = 1; } } else if (browser_width > 700) { if (resizeFlag != 2) { setMiddleTemplate(); resizeFlag = 2; } } else if (browser_width > 400) { if (resizeFlag != 3) { setSmallTemplate(); resizeFlag = 3; } } else if (browser_width < 400) { if (resizeFlag != 4) { setSmallTemplate(); if (isMobile.any()) { var scale = browser_width / 400;/* 手机横竖屏时设置获取比例,要动态设置各手机的元素的样式以达到满屏显示*/ setMobileTemplate(scale); } resizeFlag = 4; } } }, 500); }); function setLargeTemplate(){ /*当浏览器宽度大于或者等于1118px时,在这用JS设置你的样式*/ } setMiddleTemplate(){ /*当浏览器宽度大于或者等于700px并小于1118px时,在这用JS设置你的样式*/ } setSmallTemplate(){ /*当浏览器宽度大于或者等于400px并小于700px时,在这用JS设置你的样式*/ } setMobileTemplate(scale){ /*手机浏览器,在这用JS设置你的样式*/ }
按这种思路来处理,页面的兼容性很好,QA各种操作系统,各种浏览器,各种移动设备测试都pass了。第一个网站搞下来后,后面几个网站同理如法炮制,优化了代码,优化了图片的预载等等,做起来更加顺手,更快完成
相关文章推荐
- 刚做完几个简单的响应式设计的网站项目下来,杂七杂八 (一)
- 几个大型网站的Feeds(Timeline)设计简单对比
- 几个大型网站的Feeds(Timeline)设计简单对比
- Jsp动态网站初步项目 --简单商品浏览页面 (数据库itemdb的设计)
- 产品设计体会(6001)几个项目的成败
- TheBeerHouse 网站项目学习笔记(5)---架构设计
- 大型网站网页设计越简单越好
- 【项目】优化算法设计(二):程序的简单实现
- 网站安全性中的几个设计
- 极简主义网站设计:寓丰富于简单
- 收集了几个优秀的设计公司网站
- 用VS2005打开一个.NET2.0方案,里面有几个工程和一个网站,提示网站的项目.csproj文件无法打开:“此安装不支持该项目类型”,的解决办法。
- Java网站设计项目
- 几个简单商业设计标志
- 简单的网站设计 知识点记录
- 推荐几个比较好的国外软件项目外包网站(比较适合兼职)
- 大型网站网页设计越简单越好
- 制作.net网站项目前要解决以下的几个问题
- 我的创业项目-基金网站经过两个月的重构,终于做完了
- 网站设计 几个经典的css技巧