5个实用的CSS技巧

前端壹栈

共 1438字,需浏览 3分钟

 ·

2021-09-12 01:08

:where() 伪类函数

上面的代码可以用:where() 伪类函数优化为

:where() 伪类函数

上面的代码可以用:where() 伪类函数优化为

Conic gradients(圆锥渐变)函数

Scroll Snap

CSS Scroll Snap是CSS中一个独立的模块,可以让网页容器滚动停止的时候,自动平滑定位到指定元素的指定位置,包含scroll-*以及scroll-snap-*等诸多CSS属性。

image

aspect ratio

aspect-ratio  CSS 属性为box容器规定了一个期待的纵横比,这个纵横比可以用来计算自动尺寸以及为其他布局函数服务。

CSS aspect-ratio属性可以明确元素的高宽比例,日后一定是一个高频使用的CSS属性。

在过去,想要让元素等比例缩放,两种方式:

百分比padding,详见:“CSS百分比padding实现比例固定图片自适应布局”vw单位,例如:

.box {
    width50vwheight15vw;
}

但上面这些方法使用的时候均有局限性。

现在有了aspect-ratio属性,开发者对于元素比例的控制就非常容易实现了。

目前Chrome 88已经支持了aspect-ratio属性,各大浏览器大规模支持只是时间问题,我的Chrome现在版本正好是88,可以体验效果了,于是赶快尝鲜,了解下相关的细节。

aspect-ratio的兼容性

padding实现图片等比例自适应

对于绝大多数都布局,我们并不要求非要比例固定,但是有一种情况例外,那就是图片,因为图片原始尺寸它是固定的。在传统的固定宽度的布局下,我们会通过给图片设定具体的宽度和高度值,来保证我们的图片占据区域稳固;但是在移动端或者在响应式开发情况下,图片最终展现的宽度很可能是不确定的,例如手机端的一个通栏广告,iPhone7下宽度是375,iPhone7 Plus下是414,还有360等尺寸,此时需要的不是对图片进行固定尺寸设定,而是比例设定`。

banner图可能是按照比例设置的,这时候如何按照比例固定图片呢,利用padding来做,因为padding的百分比是参照宽度的

Scss variables and Mixins

mixin可以让你制作一些你想在整个网站上重复使用的CSS声明组。你甚至可以传入数值,使你的混合器更加灵活。

参考文献

  • https://levelup.gitconnected.com/5-css-tips-and-tricks-you-dont-want-to-miss-out-on-in-2021-4eb1438dee50
  • https://www.cnblogs.com/coco1s/p/7079529.html
  • https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type
  • https://www.zhangxinxu.com/wordpress/2021/02/css-aspect-ratio/




浏览 40
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报