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

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

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

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ì)上，這些少量代碼所做的是為所有正文樣式添加一個很好的過渡效果，因為它從原始狀態(tài)更改為媒體查詢中定義的新狀態(tài)。我選擇了0.5秒的持續(xù)時間和輕松輸入的轉(zhuǎn)換計時功能，但您可以使用這些設(shè)置來獲得所需的結(jié)果。

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

雖然這是一個很好的開始，但有時將過渡屬性添加到定位所有樣式的主體并不能給我們足夠的控制。如果我們不一定希望所有樣式都能過渡怎么辦？在這種情況下，我們會將“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;

}

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

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

本文標題：CSS轉(zhuǎn)換的故意斷點
文章分享：http://jinyejixie.com/news36/80736.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、網(wǎng)站策劃、虛擬主機、微信小程序、網(wǎng)站維護、網(wǎng)站內(nèi)鏈

廣告

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