SEE Conf 2021!  支付宝体验科技大会

Spy的博客

响应式网站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)图像一说;也突然有了相关争论。我们面对实现流体图片又名视网膜又名响应式图片的第一反应就是使用制作响应式布局的工具:媒体查询!浏览器无法知道它加载的网页是什么,但他可以意识到他们的渲染环境,比如说视窗大小,用户屏幕的分辨率等诸如此类的事情。

在HTML中使用meta标签的基础知识和最佳实践

元数据通常被理解为‘描述数据的数据’,在web页面中的用途之一就是使用<meta>标签。meta标签的内容一般都是表示关于HTML页面的信息,其作用是不可以被其它标签取代的。另外,meta标签还可以模拟一个HTTP响应头部(例如重定向到不同页面),同时,它还拥有像http-equivcharset这样的属性 ,在Mozilla开发者社区中有对元数据详细的文档说明。

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

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

响应式设计:响应图像

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

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

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

响应式设计:流体布局

两篇文章中关注响应式web设计的清晰概念如何响应式地使用字体之后,让我们来深人研究一下流布局。在此文中,我将演示当下是真正需要流布局的,以及当你可以选择不一定是响应式的不同解决方案。让我们接下来学习一些特定技术与应用。理解灵活的布局对你的项目很有帮助,理解和考虑到其他可行的解决方案是否是一种很好的选择。事实上,只有深入了解每种方案的优缺点,你才能有效地选择某种布局方案。布局类型有4种:固定宽度布局流体布局弹性布局混合布局,一起来逐个分析吧。

页面

返回顶部