何时使用 Em 与 Rem

你可能已经很熟练使用这两个灵活的单位,但你可能不完全了解何时使用 rem ,何时使用 em。 本教程将帮你弄清楚!

CSS中的数量查询

CSS的数量查询是一个先进的概念,对于新手来说可能有点难或者蛋疼。然而,当我们理解清楚了CSS3的伪类选择器,并且能运用自如,那么理解文章介绍的数量查询并不是复杂的事情。而且这样的工具将会越来越多,比如CSS的预处理器和后处理器都具备了这方面的功能。有了CSS的数量查询这个新概念和功能,我们在页面中就可以根据数量来选择到匹配的元素。如果你感兴趣,不仿自己跟着这篇文章尝试一下。你会有更深入的体会。

Web中的图标

随着时代的变迁与技术的不断的更新,在当今这个时代,Web中的图标(Icons)不再仅仅是局限于<img>。除了<img>直接调用Icons文件之外,还有Sprites(俗称雪碧图)Icon Font(字体图标)SVG Icon等等。今天我们就来一起探讨一下这些方法在Web中实现Icon的利弊。

没人告诉你关于z-index的一些事

关于z-index的问题是很多程序员都不知道它是如何起作用的。说起来不难,但是大部分人并没有花时间去看规范,这往往会照成严重的后果。你不信?那就一起来看看下面的问题。

苹果表动画

随着苹果表的大量生产,我想,用CSS来实现拨号动画的时候到了。在这篇文章中,我们将使用keyframe动画和一点小技巧来实现苹果标表盘进度条动画。

CSS分层

随着CSS的发展,使用CSS有语义化的命名约定和CSS层的分离,将有助于它的可扩展性,性能的提高和代码的组织管理。在我前面的文章中讨论很多关于CSS的问题都可以通过使用一个适当的CSS策略来避免。在这篇文章里,我将着重于讨论使用一种方法或者一个命名规则所带来的好处。这里有很多可供使用的前端方法和命名规则,每个都有自己的优缺点。在几乎所有的案例中CSS被分割成更易于管理的代码“块”。CSS的这种分割方式定义了每一种方法。

Responsive Image:使用srcset

今天给大家介绍有关于响应式设计中的一个新东西,现在也比较流行:响应式图像。RWD不是一个新话题,但实现它的方法并不轻松,在实现过程当中充满了陷阱。尤其是当RWD涉及到图片的处理时,有很多问题还有待于解决。

Responsive Hero Images

Hero images 给响应式设计提出了独特的挑战。在最近的响应式图片核查期间,我们发现了一个独特的解决方法,一个我想要分享的方法。直到几年前,我都不熟悉Hero image这个术语。一个就职于大公司的朋友用这个术语,我不得不问这个是什么意思。我不知道这是不是一个常见的描述因为我与世隔绝了。或者这可能是大公司的术语。

前端路上的旅行

从步入社会算起到今天,风风雨雨走过了15个年头,望着天空,掐指一算,从事前端已近五个年头。也算三分之一的时间在做前端,也是从事过时间最久的一份工作。问我为什么能做这么久?其实我也时常问自己,怎么就进前端这个行当,怎么就整了五年。正如网上所言,一入前端深似海。玩了五年,或许后面还会有一个五年,两个五年,或许...... 未来的路,谁与说不清楚,我只想每天走好自己想走的路。

使用Sass Map实现响应式排版

本来要管理Rhythm排版一致不是一件易事,响应式中的Rhythm排版就更加困难。幸运的是,Sass的Map可以更好的管理和实现响应式排版。有各种各样的方法来处理响应式排版和Vertical Rhythm,并不局限于我的建议。然而,这是我很多次工作中总结出来的经验之谈。

页面

返回顶部