分类： HTML/CSS

Resource Hints - What is Preload, Prefetch, and Preconnect?[转]

发表评论

Today we are going to explore current resource hints and directives which can be another great way to boost the performance on your website or web application. You might have heard of preload, prefetch, and preconnect, but we want to dive deeper into the differences between them how you can benefit from them. Some of the advantages of these is that they allow web developers to optimize delivery of resources, reduce round trips, and fetch resources to deliver content faster while a user is browsing a page.

"Resource Hints - What is Preload, Prefetch, and Preconnect?[转]"继续阅读

CSS 预处理脚本 Sass/Scss 进阶

发表评论

进阶语法

1 混合器

开发者在编写整个网站的时候常常遇到类似或者一样的样式块，例如 Bootstrap 中的栅格样式。当然如果重复的次数少又简单，当然没有什么影响，可当项目变得越来越复杂，产品需求越来越多，复制粘贴就很难应付了。此时便可以使用 Sass 的混合器来实现大段样式的重用。混合器使用标识符 @mixin 定义，在 @mixin 后面跟一个自定义的名字，然后用花括号内填写需要重用的样式。定义完以后便可以在样式中使用 @include 引用这个混合器。

"CSS 预处理脚本 Sass/Scss 进阶"继续阅读

CSS 预处理脚本 Sass/Scss 入门

发表评论

一、背景

使用前端 UI 框架（例如：Bootstrap、Mustard UI）的时候，虽然我们可以直接修改源码里面的 CSS 样式，但是修改起来非常麻烦低效；好在大多数框架是基于当下流行的 CSS 预处理脚本 Less 和 Sass 编译开发的，通过修改官方给出的 Sass 源码，我们可以很方便的定制它们。

"CSS 预处理脚本 Sass/Scss 入门"继续阅读

IPHONE/H5/IOS 14 版本滚条 / 滑动失效问题

发表评论

需求场景是在一个使用绝对定位布局的页面中，动态渲染一个可以滑动的子模块。

开发的时候在电脑 Chrome 上面调试没问题，安卓手机和常规 IOS 版本测试了也没问题，但是由于苹果最近更新了新的系统版本（14），在新版本上出现了滚动滑动不了的问题。

"IPHONE/H5/IOS 14 版本滚条 / 滑动失效问题"继续阅读

CSS 实现内容高度不够的时候底部（footer）自动贴底

发表评论

在 UI 切图过程中，页面往往由三个部分组成，头部、内容和底部。当页面的内容高度不够撑满屏幕，底部（footer）就跟着内容浮动上来了，小屏幕由于高度有限看不出来异常，但如果是大屏的话，底部下面变会多出很多空白，非常影响美观。

方案 1：Flex-Box

头部使用 position: sticky; 吸顶，再使用盒子（main）来包住内容（container > content）和底部（footer），这个盒子设置最小高度为除头部外的剩余屏幕高度：min-height: calc(100vh - 50px);，盒子里面使用弹性布局（flex: 1 1 auto;）让内容区域自动撑开，而底部保持不变（flex: 0 0 auto;），这样就有了内容不够时底部自动吸底，内容足够时底部自动下移的效果。

"CSS 实现内容高度不够的时候底部（footer）自动贴底"继续阅读

如何用 Sass/Less 实现单位转换（px to rem/em/vw）

发表评论

移动端开发中，常常需要根据 UI 的设计稿做出适配移动端的网页，然而设计稿常常是以像素（px）为单位的，于是需要利用 CSS 预编译器 Sass / Less 来进行转化。

一、Sass

Sass 拥有类似于传统编程语言的函数 @function，可以接收参数并返回值。

"如何用 Sass/Less 实现单位转换（px to rem/em/vw）"继续阅读

使用 max-height 实现动画效果的“展开收起”

1 条评论

当页面中有大量非重要信息时通常使用“展开收起”来处理，常见的作法是在 display: none; 和其它属性之间切换。如果想加上些动画效果通常使用 JavaScript 来实现，若想用 CSS 来实现只需设置 max-height 的值在 0 和一个比目标元素高度大的值之间切换即可。

"使用 max-height 实现动画效果的“展开收起”"继续阅读