frontend

响应式设计中的 Break Point

由于移动设备(手机,平板电脑等)的流行,越来越多的网站开始使用响应式设计来设计网站。其核心归结为一句话就是,在不同设备上自动适配不同的内容(如下图所示)。而我们为了让网站样式能够支持响应式设计,其中最关键的因素就是 CSS 中的 media queries,media queries 允许我们定义在不同内容和尺寸的设备上的样式。 如何使用 Media Queries 上面我们说到 media queries 可以帮助我们定义不同尺寸设备上的内容显示,那么我们只需要在我们现有的样式中增加针对特定内容在特定设备或者尺寸的样式即可,例如: div.container { width: 100%; } @media screen only

CSS

font-size 的常用长度单位

font-size 是网页开发的过程中 CSS 语言针对字体的一个属性,通常我们在设计一个网页时会使用不同的字体大小,可以方便对应 html 中的不同标签,我们一般作为 Heading 在整个项目中去不断的复用这些 Heading。像诸多设计工具一样,font-size 也有不同的单位,设计常用的单位可能有像素(px)、厘米(cm)等,而在 CSS 中 font-size 常用的单位有 rem、em、px、pt、% 这几种。那么 font-size 的不同单位都有什么不同呢?

frontend

小小bug

最近在写Reactjs,今天在写项目代码的过程中遇到了一个bug,记录一下. 由于项目的css修改,就去修改其中的一个React Component.然后奇怪的事情发生了,component里的Render方法被执行了两次。 代码如下 修改前 var Demo = React.createClass({ displayName: 'Demo', getInitialState: function () { return { values: [] }; }, handleAdd: function () { var values = this.state.values; values.push(''); this.setState({ values: