使用 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

使用思源黑体

关于思源黑体

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

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

响应式图片属性 srcset

srcset 属性是由 W3C 旗下的响应式图片社区提出的,目的是为不同分辨率的用户提供适合的图片大小的解决方案。之前只有 Safari 支持该属性,而现在刚刚发布的 Chrome 34 也开始支持。

srcset 设置起来很简单:

<h1><img alt="The Breakfast Combo"
    src="banner.jpeg"
    srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w">
</h1>

Continue reading

Squirrel 前端 Web 框架

很长时间没有写博客了,因为绝大部分业余时间都投入到 Squirrel 前端框架的开发中。Squirrel 是一个轻量级的移动 Web 前端框架,目的是打造一个简单易用、易扩展的基础框架,让前端脱离枯燥的重复开发,从而快速构建移动 Web 应用。之所以命名为 Squirrel 一方面是因为松鼠是公司的吉祥物,另一方面是寓意快速、灵活。
Continue reading

网站变灰 CSS

这个就不多解释了,让网站所有元素变成灰色调,全浏览器支持,使用了滤镜,比较吃性能,建议作临时方案使用。
代码如下:

body{
    -webkit-filter:grayscale(100%);
    -moz-filter:grayscale(100%);
    -ms-filter:grayscale(100%);
    -o-filter:grayscale(100%);
    filter:grayscale(100%);
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    filter:gray;
}

在 Retina 屏幕下显示变模糊的问题,可以加上:

body{
    ...
    -webkit-transform: translateZ(0);
    ...
}