目前来说知道响应式的人还不多。 自适应网页设计(响应式设计)是一种网页设计的技术做法,该设计可使网站在多种浏览 […]
目前来说知道响应式的人还不多。
自适应网页设计(响应式设计)是一种网页设计的技术做法,该设计可使网站在多种浏览设备(从桌面电脑显示器到移动电话或其他移动产品设备)上阅读和导航,同时减少缩放、平移和滚动。
淘宝、天猫都不是响应式设计,中国还没有一个大型的网站支持响应式。
国外有一些响应式网站,但我们认为也只是视觉响应式,还没有同步做到交互的响应式和图片的响应式。
响应式的主要思想就是移动优先,不引人注目的 JavaScript 和渐进增强。
最后,我们工作室还在一些相对小型的项目上,已经全站使用了响应式设计。
其实响应式网页的实现很简单,都是大家熟悉的技术。
media query(媒体查询)
因为现在主流的智能终端都是基于iOS和Android的,而它们自带的浏览器都是基于webkit内核,所以我们可以完全使用viewport属性和media query技术实现网站的响应性:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
fluid grid(流体布局)
很多项目都在使用网格技术(或者叫栅格),前几年960.gs很流行,但是随着屏幕分辨率的普遍提升,它已经不太适合当前需求了,于是最近几年fluid grid开始逐渐多了起来,这种技术其实也很简单,只是将格栅的单位由px变成%,用百分比来控制页面每列的宽度,从而实现宽度的自适应。
响应式网页设计提出以来,争吵就不断,其实核心问题只有两个:太多的资源请求和有限的终端支持之间的矛盾、响应式的网页设计和移动终端在用户体验和视觉风格上的差异。前者不能容忍在弱小的手机/平板上通过龟速的3G/2G网络来加载一个笨重的PC端页面,而后者纠结响应式网站不像手机网站。