使用 CSS3 Rem 单位布局

Rem(font size of the root element)是指相对于根元素的字体大小的单位,它与 em 类似,只不过 em 是相对与父层进行计算,而 rem 是相对与根元素的 font-size 进行计算。所以它即比 px 单位灵活,又比 em 稳定,是一个很有潜力、值得尝试的 CSS 单位。

Rem 布局

简而言之就是在 CSS 布局时使用 rem 单位,上面介绍了 rem 的特点就是基于根元素的 font-size 进行计算,所以可以通过动态的修改根元素的 font-size 值大小,来让页面的布局达到自适应的等比缩放效果,从而使布局在不同尺寸的屏幕上表现一致。
Continue reading

SQ 再起航

距离 Squirrel 最后一次更新已有 4 个月的时间,在此期间因为换工作所以没有足够的时间精力来维护,现在基本稳定,所以 Squirrel 的更新会回归正轨。

这里新开辟 Squirrel 栏目,算是 Squirrel 框架的专属博客吧,会记录一些框架设计理念,大版本的升级规划和项目中的使用技巧等,Squirrel 会以小步慢跑的节奏进行更新,虽然目前还是一人维护,但现在有更强大的团队支撑,所以 Squirrel 会更加茁壮的成长下去。
Continue reading

CSS 布局调试工具

说是工具其实只是一段 Javascript 代码,但非常实用,它会给页面里所有的 DOM 元素添加一个 1px 的描边(outline),方便我们在调试 CSS 过程中分析、排查问题。

先来看看代码,它有两个版本,一个是使用的$$选择器,代码量更少(浏览器控制台支持 $$ 选择器);另一种就是传统的document.querySelectorAll选择器:
Continue reading

使用思源黑体

关于思源黑体

思源黑体是谷歌与 Adobe 联合开发,支持简体中文、繁体中文、日文、韩文以及英文;支持 ExtraLight、Light、Normal、Regular、Medium、Bold 和 Heavy 共7种字体粗细,可以满足不同场景下的文字显示需求。这个字体通过免费开源方式提供,支持多种语言,适合设计、开发人员甚至是普通用户下载和使用……

更具具体的介绍可以点击:《隆重介绍 思源黑体:一款Pan-CJK 开源字体》
Continue reading

Adobe Photoshop 脚本

因为偶尔会去修修图片,而其中大部分操作是固定的,所以就想试试用脚本来解决,搜索了下之后发现 Photoshop 本身就支持调用脚本,Adobe 把它称为 Photoshop Scripting,它支持三种语言来编写:AppleScript、VBScript、Javascript,这里当然是使用 Javascript 的写法。
Continue reading

D2 前端技术会议小结

D2 前端技术论坛(Designer & Developer Frontend Technology Forum)是国内比较大型的非商业性前端综合技术会议。 它为国内前端开发者和网站设计师提供一个交流的机会,一起分享技术的乐趣,探讨行业的发展。

今年 D2 已经是举办的第九届,本届共有13个议题,分两个会场同时进行,我参与了以下分享议题:

  • 《nodejs 一小步,前端一大步》
  • 《支付宝前后端分离的思考与实践》
  • 《面向多端的蘑菇街前端实践》
  • 《淘宝前端工程与自动化体系》
  • 《第三方开发前端实践》
  • 《企业级 NPM 服务在阿里的实践》

Continue reading