视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
WORKS页改版吐槽_html/css
2020-11-27 16:21:58 责编:小采
文档


近期一直忙着搬家,几乎占用了我所有精力,简直人累、心累,目前总算暂告一段落。于是就想写点的什么,但又不知道写些什么,那就便吐槽几句刷个存在感。

前不久抽空把WORKS页面稍作了修改。正巧昨天是苹果的春季发布会,为了凸显逼格,就按照苹果的逻辑来简单说明下:

  1. 使用当下最为热门的CSS 3.0样式写法。创作这个页面时,在深得人心的CSS 2.0风格基础上,让它从里到外焕然一新。
  2. 响应式布局的设计理念,让更多用户能在不同分辨率的终端上得到更好体验。
  3. 针对主流浏览器进行更好的视觉呈现,不再考虑为IE8及以下浏览器提供更好的支持。
  4. 编不下去了!

这次最主要的,就是部分地方用到了平时大家所不太熟悉的 vw和 vh来作为长度单位。简单描述来说,就是根据视窗(可视区域)的宽度和高度,自动计算百分比值。可以轻松的实现一些平时需要依靠JS所完成的内容。

举个例子:

假设 window.innerWidth = 1280px,然后把一个div的宽度设置成 width:10vw,那这个div的宽度就相当于窗口可视区域大小的10%,既: 1280/10 = 128px,并且这个值会随着窗口的变化而自动改变。

但由于其 兼容性,普及还需一段时日。

总之有兴趣的话可以看看。

下载本文
显示全文
专题