? ? ? CSS轉(zhuǎn)換的故意斷點(diǎn)

響應(yīng)式網(wǎng)站設(shè)計(jì)不僅僅是HTML和CSS中的幾行代碼。這是一種構(gòu)建網(wǎng)站的方法，需要我們考慮整個(gè)用戶(hù)體驗(yàn)。這意味著接受用戶(hù)不會(huì)按照我們希望的方式使用網(wǎng)站。如果他們可以打破它，他們會(huì)。他們將使用過(guò)時(shí)的瀏覽器，緩慢的互聯(lián)網(wǎng)連接，放大和縮小，以及調(diào)整瀏覽器的大小。我們的工作不僅要為這些場(chǎng)景做好準(zhǔn)備，還要圍繞它們添加周到的設(shè)計(jì)。一種方法是使用CSS轉(zhuǎn)換。

媒體查詢(xún)?cè)试S我們?cè)诟鞣N屏幕分辨率下更改布局，換出圖像和更改文本大小。但是，如果從一個(gè)斷點(diǎn)移動(dòng)到另一個(gè)斷點(diǎn)，單獨(dú)的媒體查詢(xún)可能會(huì)產(chǎn)生非常刺耳的效果。這可以通過(guò)調(diào)整瀏覽器大小，放大和縮小，或?qū)⒃O(shè)備從橫向旋轉(zhuǎn)到縱向。在響應(yīng)式網(wǎng)站中引入CSS轉(zhuǎn)換和媒體查詢(xún)可以消除這些斷點(diǎn)，使得一些設(shè)計(jì)決策看起來(lái)不像是錯(cuò)誤而且更有意。

CSS過(guò)渡入門(mén)

在響應(yīng)式網(wǎng)站中開(kāi)始轉(zhuǎn)換的最佳方法是將屬性添加到樣式表中的正文，并定位所有樣式。

body {

-網(wǎng)站kit-transition:all .5s ease-in-out;

-moz-transition:all .5s ease-in-out;

-o-transition:all .5s ease-in-out;

transition:all .5s ease-in-out;

}

本質(zhì)上，這些少量代碼所做的是為所有正文樣式添加一個(gè)很好的過(guò)渡效果，因?yàn)樗鼜脑紶顟B(tài)更改為媒體查詢(xún)中定義的新?tīng)顟B(tài)。我選擇了0.5秒的持續(xù)時(shí)間和輕松輸入的轉(zhuǎn)換計(jì)時(shí)功能，但您可以使用這些設(shè)置來(lái)獲得所需的結(jié)果。

定義ems中的所有文本（響應(yīng)式網(wǎng)站設(shè)計(jì)中類(lèi)型的首選度量單位）非常重要，因此一切都與身體相關(guān)。這確保整個(gè)響應(yīng)式網(wǎng)站中的其余文本將按比例縮小，從而創(chuàng)建一個(gè)有凝聚力的過(guò)渡效果。

雖然這是一個(gè)很好的開(kāi)始，但有時(shí)將過(guò)渡屬性添加到定位所有樣式的主體并不能給我們足夠的控制。如果我們不一定希望所有樣式都能過(guò)渡怎么辦？在這種情況下，我們會(huì)將“all”替換為您要添加轉(zhuǎn)換的特定樣式，以逗號(hào)分隔。

body {

-網(wǎng)站kit-transition:font-size .5s ease-in-out;

-moz-transition:font-size .5s ease-in-out;

-o-transition:font-size .5s ease-in-out;

transition:font-size .5s ease-in-out;

}

同樣，單獨(dú)的身體元素并不總是最終都是。繼續(xù)探索響應(yīng)式網(wǎng)站中轉(zhuǎn)換的可能性，在受斷點(diǎn)影響的其他元素上使用相同的代碼。但要避免一些令人頭疼的問(wèn)題，并確保首先閱讀哪些元素支持css轉(zhuǎn)換。

當(dāng)您使用CSS Transitions和Responsive?網(wǎng)站設(shè)計(jì)時(shí)，請(qǐng)確保您的設(shè)計(jì)決策能夠增加整體用戶(hù)體驗(yàn)，而不是從中消除它。過(guò)度延遲和轉(zhuǎn)換時(shí)序功能過(guò)分可能會(huì)產(chǎn)生性能緩慢的錯(cuò)覺(jué)，而且實(shí)際上與“響應(yīng)式網(wǎng)站設(shè)計(jì)”完全相反。相反，專(zhuān)注于使CSS過(guò)渡變得微妙和有目的性。