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

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

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

CSS過渡入門

在響應(yīng)式網(wǎng)站中開始轉(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è)很好的過渡效果，因?yàn)樗鼜脑紶顟B(tài)更改為媒體查詢中定義的新狀態(tài)。我選擇了0.5秒的持續(xù)時(shí)間和輕松輸入的轉(zhuǎn)換計(jì)時(shí)功能，但您可以使用這些設(shè)置來獲得所需的結(jié)果。

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

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

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)影響的其他元素上使用相同的代碼。但要避免一些令人頭疼的問題，并確保首先閱讀哪些元素支持css轉(zhuǎn)換。

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

本文標(biāo)題：CSS轉(zhuǎn)換的故意斷點(diǎn)
文章路徑：http://jinyejixie.com/news/80736.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、軟件開發(fā)、靜態(tài)網(wǎng)站、網(wǎng)站設(shè)計(jì)、網(wǎng)站維護(hù)、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)