HTML CSS

讓文字配合RWD 網站自動縮放大小 - Medium

文章推薦指數： 80 %
投票人數：10人

從手機、平板到桌機的RWD 響應式網頁設計字級表(Font-size) & CSS Media Queries ... 推薦使用相對數值rem，對於RWD網頁字級設定時只要調整html 根元素的字體大小，便 ... GetunlimitedaccessOpeninappHomeNotificationsListsStoriesWritePublishedinVHS — Designvitaminforcreativemind.IllustrationbyVeraChang讓文字配合RWD網站自動縮放大小從手機、平板到桌機的RWD響應式網頁設計字級表(Font-size)&CSSMediaQueries什麼是RWD？RWD指的是響應式Web設計（ResponsiveWebDesign），能夠隨著不同容器如：電腦、平板、手機等螢幕大小調整內容排版。

當使用現成Bootstrap框架或是版型時通常已預設字級大小，不太需要去調整。

但如果想建立一個完全客製化的響應式網站，就必須自行設定字級。

關於CSS網頁字體，可調整的部分有字型、字體大小、字重、行高、字距、樣式、對齊、顏色、大小寫等，這篇文章將針對字級大小解析。

文章分為幾個段落：文字大小的CSS語法網頁的字級表CSSMediaQueries範例分析好用資源參考資料文字大小的CSS語法網頁常用的文字單位絕對數值：px像素(Pixel)。

px是相對於顯示器屏幕解析度而言的，1px並不是一個固定的長度，而是根據載具及其使用方式而定。

相對數值：em。

em是基於基數來計算出來的相對字體大小，如未設置，則瀏覽器的默認字體尺寸為16px。

任意瀏覽器的默認字體高都是16px。

所有未經調整的瀏覽器都符合：1em=16px。

為了簡化font-size的換算，需要在css中的body選擇器中聲明Font-size=62.5%，這就使em值變為16px*62.5%=10px,這樣12px=1.2em,10px=1em,也就是說只需要將你的原來的px數值除以10，然後換上em作為單位就行了。

--W3CSchool相對數值：rem。

CSS3新增的一個相對單位，這個單位與em的區別在於可以只修改根元素就成比例地調整所有字體大小，避免字體大小逐層復合的連鎖反應。

設定根元素html{font-size:10px;}，則body{font-size:1.4rem;}的字級大小則會是1.4*10=14px推薦使用相對數值rem，對於RWD網頁字級設定時只要調整html根元素的字體大小，便可使所有網頁文字同時等比例縮放，不必逐一修改。

網頁的字級表平面設計排版時會將版面分為大標、中標、小標、內文、註解等不同字級字重區分版面與閱讀重要順序。

source:Violaine&Jeremy在網頁上也是同樣原則，一般來說分為

~的標題

段落內文字連結文字

  • 表單內文字等等。

    GoogleFiCSSMediaQueries一個良好使用的網站必須能夠適應不同裝置上的閱讀，因此現在大部分網站都符合RWD設計。

    在一個RWD的網站中會使用@media去定義不同螢幕尺寸的寬高，除了圖片與排版會隨著尺寸重新排列或縮放，也需要定義個寬度下的字級大小。

    每個網站的Breakpoints不一定相同，可參考Mediaqueriesforcommondevicebreakpoints、The100%correctwaytodoCSSbreakpoints、TheMostUsedResponsiveBreakpointsin2017OfMine。

    以下是在設計網站時調整後的最佳瀏覽尺寸。

    根元素html{font-size:12px;}更多資料可參考The100%correctwaytodoCSSbreakpoints、MediaQueris範例分析GoogleFiGoogleFi的網站字級大小分級單純，在網站設計時通常不會用到

    ~所有的字級大小，且依照內容排版，會在同樣的Tag下也會加上不同的Class去在設定字級。

    Mobile/~1050px1300px~/1920px好用資源FontfaceNinja是一款免費的網頁瀏覽器擴充功能，可以直覺的辨識當前網頁字型、字級、行高、字距、顏色，甚至可以直接試用與購買。

    FontFlipper是一個可以讓你即時瀏覽GoogleFont字體在你的設計稿上效果的網站。

    上傳設計稿後輸入文字，便能調整大小、位置等等。

    有趣的是與Tinder類似的喜歡/不喜歡選擇，你喜歡的文字將暫存在左側，電選後可直接下載或再次瀏覽。

    相關文章推薦4種網站首頁典型設計指南分析設計網站首頁4種典型的效果與限制—Grid、Full-screen、One-row和近年越來越多網站採用的Typography(ImagesonHoverEffects)。

    medium.com參考資料鐵人賽：網頁設計-文字大小、行高與空間上的關係CSSfont-size文字大小網頁字型最佳化IsYourWebsiteFontSizeTooSmall?LargeTextIsInTheResponsiveWebsiteFontSizeGuidelinesW3CSchool-CSSTextW3CSchool-CSSFontW3CSchool-CSSTextEffectsW3CSchool-CSSUnits謝謝你看到這裡，或許你想訂閱一份電子報？Hello，我是Vera，目前在IT產業工作的VisualDesigner。

    如果有任何建議或合作提案也可以透過以下這些方式聯繫。

    Behance｜Dribbble｜Website--2MorefromVHS — Designvitaminforcreativemind.Visualizing,Hearing&Seeing.Designvitaminforcreativemind.這本設計線上誌希望提供更多元的創作靈感，包含視覺設計、品牌與文字閱讀的綜合設計維他命。

    ReadmorefromVHS — Designvitaminforcreativemind.AboutHelpTermsPrivacyGettheMediumappGetstartedVeraChang385FollowersMultidisciplinarydesigner&EditorofVHS—Designvitaminforcreativemind.一本視覺設計與閱讀的線上誌｜verachang.netFollowMorefromMediumAvocato666SOLIDdesignPrinciplesCliffBergTheHorrendousDesignofStreamingAppsRobinNoguierIt’sgonnabeabumpyrideor…howtogetstartedinUI/UXDesign?KimberleyTinDesignSprint:MyLocalServicesHelpStatusWritersBlogCareersPrivacyTermsAboutKnowable

    • 請為這篇文章評分？

    延伸文章資訊