Home >Web Front-end >HTML Tutorial >WORKS页改版吐槽_html/css_WEB-ITnose

WORKS页改版吐槽_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:23:111030browse

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

前不久抽空把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,并且这个值会随着窗口的变化而自动改变。

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

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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn