CSS轉換的故意斷點

? ? CSS轉換的故意斷點

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

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

CSS過渡入門

在響應式網站中開始轉換的方法是將屬性添加到樣式表中的正文，并定位所有樣式。

body {

-網站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;

}

本質上，這些少量代碼所做的是為所有正文樣式添加一個很好的過渡效果，因為它從原始狀態更改為媒體查詢中定義的新狀態。我選擇了0.5秒的持續時間和輕松輸入的轉換計時功能，但您可以使用這些設置來獲得所需的結果。

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

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

body {

-網站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;

}

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

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

本文標題：CSS轉換的故意斷點
文章分享：http://m.kartarina.com/news36/80736.html

成都網站建設公司_創新互聯，為您提供商城網站、網站策劃、虛擬主機、微信小程序、網站維護、網站內鏈

廣告

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