《无论何时我们恋情都是10厘米》

老师 —— 现在摸不着头脑,到了迷茫的时候这些会有用也说不定。

现在理所当然度过的每一天,也会有结束的时候。就算是毫无感觉而度过的每一天,也可能变成再也不会到来的无可替代的时光。名为今天的一页,这一段场景,相互联系,相互交叠,成为故事

极简OffetHeight/ScrollHeight/ClientHeight

图片占位符最佳实践

一般情况下,浏览器在解释 HTML 文档流过程中,遇到img等资源标签,会马上发起资源请求获取。但是对于图片这种需要占用空间的元素,浏览器并没有一个默认机制来提供占位。

 所以可能会有童鞋直接使用 UED 原图的大小来作为默认图片大小占位,在移动端场景,不同移动设备宽度不一致,图片需要适配设备分辨率,用像素显得灵活性较差。

对于移动端响应式,一般有两种方案:

  • 通过rem来适配不同设备的宽度
  • 利用padding-bottom的特性来”撑开” 占位空间

使用 Rem

对于现代移动设备来说,直接使用rem是一个不错的方案。如果需要在 PC 使用,需要考虑一下兼容性,https://caniuse.com/#search=rem

使用 padding-bottom

利用padding-bottom根据当前元素width作为百分比参考,只需要设定占位元素宽度以及宽高比例(height/width)即可。padding 为 css2.1 标准,可兼容至 IE4,基本无需考虑兼容性问题。

外边合并

只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。由于margin merge使用条件十分有限,建议使用这种规则时候,需要多考虑以后维护会带来的问题(如布局类型改变带来的布局问题)。