Responsive

浏览器输入事件:我们可以做的比点击更好么?

响应用户输入可以说是我们界面开发的核心。为了构建响应式Web产品,理解触摸,鼠标,指针,键盘如何和浏览器一起工作是关键。你很有可能已经在移动浏览器上经历了300毫秒的延迟或者在纠结于触摸滚动导致页面卡顿。在这篇文章中,我们将介绍事件级联并且利用这些知识来实现一个支持多种输入法的点击事件而不违反像Opera Mini这些代理浏览器事件规则。

响应式网页设计的9条基本原则

响应式网页设计是针对多屏幕问题的一个很好的解决方案,但从印刷的视角来看有点困难。没有固定的页面尺寸,没有毫米或英寸,没有任何的物理限制,无从下手。为了desktop和mobile单独使用像素设计的方法也成为了过去,因为越来越多的设备都可以打开网站。因此,我们需要弄清楚响应式网页设计的一些基本原则,接受流体网页,而不是与之相抗。为了让它保持简单,我们将着眼于布局(是的,响应式比它更复杂,如果你想了解更多,这是一个很好的开端。)

响应式网站Gilt.com之四:Full-Screen Modal

为了把网站Gilt.com在移动端响应,我们基于特殊行动团队确定的几种响应式模式来“响应”我们网站布局。早点确定这些模式有利于帮助我们更有信心地作出响应式相关的决定。在这第四篇响应式相关博文里,我将与你分享如何发现和实现我们确定的最热衷设计模式之一:全屏Modal!

响应式网站Gilt.com之三:Selenium Edition!

在本系列的第二篇文章中,我的同事Greg Mazurek讲了为什么在项目使用“在选择器内使用媒体查询”。采用这种模式的好处就是在未来开发中代码可维护性更强。那么,接下来我将讨论我们如何把相同的原则应用到测试实践中来。

响应式网站Gilt.com之二:Block vs. In-selector Media Queries

在第一篇文章中,分享了如何组织一个成功的回顾总结会议。那么在此文章中,主要讨论我们工作中所用到的技术以及如何组织媒体查询。通过实战来介绍在项目中使用块媒体查询好还是在选择器中插入媒体查询方便。

响应式网站Gilt.com之一:回顾&总结

响应式网站听起来并不陌生,但还是有很多同学没有实战经验,可以说听其名已久,但就从未操刀。今天开始根据Gilt团队以制作响应式Gilt.com网站为例,通过一个系列来介绍Gilt团队是如何制作一个响应式网站,碰到了什么问题?又是如何解决这些问题?首先要向大家介绍的是回顾与总结。通过回顾与总结,来理清楚整个开发过程的每个环节,更为重要的是通过这样的模式在不断提高团队的整体实力。

Srcset和sizes

四年前,ETHAN MARCOTTE发布了一篇文章(《Responsive Web Design》)之后的第13天,Steve Jobs发布了iPhone,突然有了流体视网膜(Retina)图像一说;也突然有了相关争论。我们面对实现流体图片又名视网膜又名响应式图片的第一反应就是使用制作响应式布局的工具:媒体查询!浏览器无法知道它加载的网页是什么,但他可以意识到他们的渲染环境,比如说视窗大小,用户屏幕的分辨率等诸如此类的事情。

响应式设计:跨浏览器兼容性

上一篇文章中,我阐述了在响应式设计中处理图像3种方案的观点,讨论了最好的解决方案,采用合适图像尺寸服务于各种尺寸的屏幕。那么,本文接下来将从另外一个角度来聊管理图像,那就是跨浏览器的兼容性。在整个网页开发过程中,尤其你想创造一个响应式的结构——一个web开发人员必须去面对一个最重要及最频繁的问题就是兼容各种浏览器。

响应式设计:响应图像

这是《Understanding Responsive Web Design》系列教程中的第五篇。本文中,我将展示当一个web开发人员在创建响应式网站时都会遇到的典型问题:对图像的处理。或许你已知道,移动终端开发者面临的挑战是多不胜数的,使得图像适应多种屏幕尺寸无疑是最大的困难之一。现在有三种方案可供开发人员去选择开发响应式图像:与浏览器‘对抗’、放弃它、或者依赖服务器。接下来,我们去了解每种方案的优点与缺点。

响应式设计:自定义网格布局

在前面的文章中,我已介绍了“流布局”的特性和描述了如何使用响应式字体。在本文中,我将介绍一种应用广泛及非常著名的网格布局。网格系统其实早已应用在印刷媒体上,只是在web和mobile上的应用才发展一段时间。

页面

返回顶部