5個(gè)實(shí)用的CSS技巧

:where() 偽類(lèi)函數(shù)

上面的代碼可以用:where() 偽類(lèi)函數(shù)優(yōu)化為

Conic gradients（圓錐漸變）函數(shù)

Scroll Snap

?

CSS Scroll Snap是CSS中一個(gè)獨(dú)立的模塊，可以讓網(wǎng)頁(yè)容器滾動(dòng)停止的時(shí)候，自動(dòng)平滑定位到指定元素的指定位置，包含scroll-*以及scroll-snap-*等諸多CSS屬性。

?

aspect ratio

aspect-ratio  CSS 屬性為box容器規(guī)定了一個(gè)期待的縱橫比，這個(gè)縱橫比可以用來(lái)計(jì)算自動(dòng)尺寸以及為其他布局函數(shù)服務(wù)。

?

CSS aspect-ratio屬性可以明確元素的高寬比例，日后一定是一個(gè)高頻使用的CSS屬性。

?

在過(guò)去，想要讓元素等比例縮放，兩種方式：

百分比padding，詳見(jiàn)：“CSS百分比padding實(shí)現(xiàn)比例固定圖片自適應(yīng)布局”vw單位，例如：

.box {
    width: 50vw; height: 15vw;
}

但上面這些方法使用的時(shí)候均有局限性。

現(xiàn)在有了aspect-ratio屬性，開(kāi)發(fā)者對(duì)于元素比例的控制就非常容易實(shí)現(xiàn)了。

目前Chrome 88已經(jīng)支持了aspect-ratio屬性，各大瀏覽器大規(guī)模支持只是時(shí)間問(wèn)題，我的Chrome現(xiàn)在版本正好是88，可以體驗(yàn)效果了，于是趕快嘗鮮，了解下相關(guān)的細(xì)節(jié)。

aspect-ratio的兼容性

padding實(shí)現(xiàn)圖片等比例自適應(yīng)

對(duì)于絕大多數(shù)都布局，我們并不要求非要比例固定，但是有一種情況例外，那就是圖片，因?yàn)閳D片原始尺寸它是固定的。在傳統(tǒng)的固定寬度的布局下，我們會(huì)通過(guò)給圖片設(shè)定具體的寬度和高度值，來(lái)保證我們的圖片占據(jù)區(qū)域穩(wěn)固；但是在移動(dòng)端或者在響應(yīng)式開(kāi)發(fā)情況下，圖片最終展現(xiàn)的寬度很可能是不確定的，例如手機(jī)端的一個(gè)通欄廣告，iPhone7下寬度是375，iPhone7 Plus下是414，還有360等尺寸，此時(shí)需要的不是對(duì)圖片進(jìn)行固定尺寸設(shè)定，而是比例設(shè)定`。

?

banner圖可能是按照比例設(shè)置的，這時(shí)候如何按照比例固定圖片呢，利用padding來(lái)做，因?yàn)閜adding的百分比是參照寬度的

?

Scss variables and Mixins

?

mixin可以讓你制作一些你想在整個(gè)網(wǎng)站上重復(fù)使用的CSS聲明組。你甚至可以傳入數(shù)值，使你的混合器更加靈活。

?

參考文獻(xiàn)

• 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/