WORKS页改版吐槽_html/css_WEB-ITnose
程序员文章站
2023-12-23 14:25:46
...
近期一直忙着搬家,几乎占用了我所有精力,简直人累、心累,目前总算暂告一段落。于是就想写点的什么,但又不知道写些什么,那就便吐槽几句刷个存在感。
前不久抽空把WORKS页面稍作了修改。正巧昨天是苹果的春季发布会,为了凸显逼格,就按照苹果的逻辑来简单说明下:
- 使用当下最为热门的CSS 3.0样式写法。创作这个页面时,在深得人心的CSS 2.0风格基础上,让它从里到外焕然一新。
- 响应式布局的设计理念,让更多用户能在不同分辨率的终端上得到更好体验。
- 针对主流浏览器进行更好的视觉呈现,不再考虑为IE8及以下浏览器提供更好的支持。
- 编不下去了!
这次最主要的,就是部分地方用到了平时大家所不太熟悉的 vw和 vh来作为长度单位。简单描述来说,就是根据视窗(可视区域)的宽度和高度,自动计算百分比值。可以轻松的实现一些平时需要依靠JS所完成的内容。
举个例子:
假设 window.innerWidth = 1280px,然后把一个div的宽度设置成 width:10vw,那这个div的宽度就相当于窗口可视区域大小的10%,既: 1280/10 = 128px,并且这个值会随着窗口的变化而自动改变。
但由于其 兼容性,普及还需一段时日。
总之有兴趣的话可以看看。
推荐阅读
-
吐槽搜狗浏览器_html/css_WEB-ITnose
-
吐槽一下vue-loader_html/css_WEB-ITnose
-
吐槽搜狗浏览器_html/css_WEB-ITnose
-
WORKS页改版吐槽_html/css_WEB-ITnose
-
吐槽一下vue-loader_html/css_WEB-ITnose
-
吐槽-写页面时的工作笔记_html/css_WEB-ITnose
-
吐槽-写页面时的工作笔记_html/css_WEB-ITnose
-
吐槽前端组件化的踩坑之路_html/css_WEB-ITnose
-
吐槽一下百度系网站图片的一些问题_html/css_WEB-ITnose
-
建设吐槽网站系列(一)_html/css_WEB-ITnose