<tt id="q85uj"><address id="q85uj"></address></tt>

  1. <tt id="q85uj"><span id="q85uj"></span></tt>
    <i id="q85uj"><address id="q85uj"></address></i>

    <u id="q85uj"></u>

  2. <b id="q85uj"><address id="q85uj"></address></b>
    <ruby id="q85uj"></ruby><acronym id="q85uj"></acronym>
      <tt id="q85uj"><address id="q85uj"></address></tt>
      Menu

      演示響應性文本技術的10個CSS代碼片段

      <返回列表

      在設計響應性網站時,我們通常會花費大部分時間確保布局和圖像等項目在較小的屏幕上正常工作。但排版我們也應該把它放在首位。確保文本看起來很棒,并為任何設備的可讀性進行優化是偉大設計的關鍵部件。

      雖然CSS媒體查詢可以幫助我們調整文本以滿足移動設備的需求,但是還有其他令人興奮的方式來應對這一挑戰。讓我們看一看使用響應性文本的一些更有趣的技術。

      無響應

      如果您使用的CSS預處理器較少,此混合器將自動生成代碼,這些代碼將根據屏幕分辨率很好地縮小文本。

      開那輛大眾車

      我已經使用CSS很長一段時間了,但是我從來不知道單位用于根據元素的視圖對元素進行調整大小。在本例中,VW單元用于根據視口的寬度自動調整文本大小。實際上支撐(至少部分),一路回到IE 11。顏色我很驚訝!

      具有更好VUE的單行文本

      有時候,因為你是一個設計師,你真的希望文本保持在單行上--不管屏幕大小如何。您將發現這類功能的幾個選項,包括使用Vue.js的示例。

      反應能力

      這里有一個例子,它并不是關于文本的大小,而是以一種有趣和有吸引力的方式重新排列它。更改視口大小會啟動動畫,因為文本符合新的容器大小。

      呆在線內

      能夠在多個設備中保持一致的垂直間隔對于UX來說是一件非常好的事情。下面的示例使用SASSMIXIN來實現這一點,并有一個記事本背景來證明這一點。

      控制屬性

      CSS自定義屬性(又名“變量”)是最新的“必須擁有”特性,正在進入我們的開發工具箱。它們的工作方式類似于PHP或JavaScript中的變量,因為可以隨時調用它們,避免大量重復。下面是一個使用變量的示例,以及CSScalc函數自動調整文本大小。

      響應式文本滑塊

      基于文本的滑塊是如此的好,因為它是一種令人難以置信的輕量級的方式來喚起人們對內容的關注。此響應示例使用純css以及自舉創造一些有吸引力和功能性的東西。

      適應

      雖然我們之前看過一個示例,該示例使文本在屏幕大小相同的行上保持不變,但這一示例的不同之處在于,它將在必要時將項目移動到新行。然而,它仍將確保案文保持一致的大小。所以這是兩種世界中最好的一種。

      光潔

      我們已經考慮了更少的混合,所以我們也要給Sass一些愛。隨著視口的變化,這個窗口提供了文本大小的非常平滑的轉換。

      字符計數

      如果您希望根據一行中的多個字符使文本響應,怎么辦?下面是一個使用CSS的示例元素查詢才能實現。這為CSS中即將出現的特性提供了一個很好的介紹。

      更好地控制文本

      正如我們所發現的,您可以采取許多不同的方法來實現響應性文字進入你的設計。令人高興的是,這么多方法基本上是自動的--這意味著您不必擔心為較小的屏幕進行自己的計算。它節省時間,而且簡單有效。

      新的CSS規范,如元素查詢和自定義屬性,使我們能夠更好地控制文本和設計元素的行為。我們的文本正在成為這些進步的恩人,并將導致一個更易讀的移動網絡。


      最新網站設計資訊
      企業網站建設

      企業網站建設優化一條龍,多年品牌網站設計,營銷網站開發,手機網站制作,響應式網站設計

      聯系我們

      電話:18868949445QQ:1611387063 郵箱:[email protected]

      聯系云軒總監微信

      微信
      夫妻性生生活视频 - 视频 - 在线观看 - 电影影院 - 品赏网