Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

360code/responsiveSolution

Open more actions menu

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 

Repository files navigation

###响应式解决方案-行业兴趣小组

​ ####思路:

1> 对不支持mediequery的浏览器的兼容处理。

a.初次访问,通过js判断浏览器是否支持mediequery,如果不支持的话则判断窗口尺寸,然后根据当前990-1190-1390的3种尺寸标准,在HTML标签上写入区别当前尺寸的class,同时写入当前匹配屏幕尺寸值的cookie。

b.再次访问,后台通过读取cookie,获取到用户浏览器当前尺寸,在HTML标签上设置对应的class。 通过样式继承,实现适合当前浏览器的页面渲染。

​ c.再次访问并且用户尺寸发生变化,即(用户多窗口打开页面,各窗口尺寸不一致,导致cookie值与当前窗口尺寸不一致)。JS通过cookie值与当前的HTML标签class进行对比,如果不一致,则js按当前屏幕尺寸更新页面html标签class,同时更新cookie值。

​2>更好的兼容响应式设计。

合适的栅格系统+后台编译css,支持页面的响应式。

​3>页面上由于尺寸太小导致隐藏的内容处理。

对于页面内容,比较重要的信息,比如offer楼层,隐藏掉的元素通过js添加交互效果、“显示更多”的点击区块进行切换,详见demo:http://ali-062323w.hz.ali.com/media/demo1.htm。

####细节:

(1)如何编写兼容浏览器的css。
通过less预编译css,统一写法风格,降低门槛和维护成本。
命名规范:990 1190 1390三个尺寸对应:max1024 max1280 max1440
详见:https://gist.github.com/swaydeng/6265843
(2)如何判断浏览器是否兼容mediaquery
采用modernizr.js对页面是否支持mediaquery进行判断,并在html标签上打上标签。感兴趣的同学可以移步:https://github.com/360code/modernizr 这里有详细的源码分析。
(3)media-queries.js 或 respond.js 对比分析
respond.js:快速、轻量,用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width 特性,支持跨域;css3-mediaqueries.js:对CSS3 Media Queries属性的支持比较全面。
我们的建议:考虑到目前我们主要是用于PC端屏幕尺寸990-1190-1390响应,并且基于正常真实用户在打开页面以后很少去缩放窗口尺寸,IE6-8版本浏览器仅用于初始化的显示状态,不做缩放下的resize事件。故果断放弃了对不支持mediequery浏览器的过度处理,只做临界点的处理。当然某些特殊页面,也可以考虑用这种现成方案来达到效果。
(4)服务端如何“打标”
基于node模块实现。详见:https://github.com/360code/responsiveSolution/blob/master/webResponse.js
​ (5)中文站浏览器相关数据
科普:IE6-8占比达到51.24%,呈逐步下降的趋势。排名靠前的浏览器尺寸为:1366768 1440900 1024768 1280800。详细数据:http://idata.alibaba-inc.com/links/bieeDetailLinks.htm?id=5661&type=0&code=R

Demo预览地址猛戳:http://ali-062323w.hz.ali.com/media/demo1.htm

About

响应式解决方案研究

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published
Morty Proxy This is a proxified and sanitized view of the page, visit original site.