響應式排版的媒體查詢

我在努力尋找一種方法讓我的排版響應。我的代碼將隨之而來。無論何時我在開發工具中刷新，這似乎都沒有預期的結果。如何在手機，平板電腦和筆記本電腦/臺式機上獲得良好的文字效果？響應式排版的媒體查詢

@media only screen and (min-width: 320px) 
    { 
    html {line-height: 1.25em, font-size: 16px;} 
    h1{line-height: 1.25em, font-size:32px;} 
    h2{line-height: 1.15384em, font-size:26px;} 
    h3{line-height: 1.136363em, font-size:22px;} 
    h4{line-height: 1.111111em, font-size:18px;} 
    }

來源

2016-09-07 Quesofat

您是否在您的HTML中設置了視口元標記？

<meta name="viewport" content="width=device-width, initial-scale=1">

另外，爲什麼不使用REM來使它更簡單？您可以指定初始html字體大小和行高，然後更改每個查詢的REM值。閱讀：https://css-tricks.com/confused-rem-em/

來源

2016-09-07 14:23:06

有很多方法可以做到這一點，它始於設計。你在哪裏決定改變字體大小和行高的值？什麼看起來不錯，什麼時候開始看起來不好？

當您擴大瀏覽器窗口並開始看起來不好時，那是您何時使用媒體查詢或JavaScript更改值的中斷點。事實上，有一個JavaScript庫可以幫助你做這樣的事情（但目前這個名字讓我不知所措）。

因此，Web開發人員可以創建這些媒體查詢的場所，這些查詢可以將值更改爲您對設計師看起來很好的一種方式。

來源

2016-09-07 14:45:33 Rob

您可以使用css calc函數。

font-size: calc(1em + 1vw);

至於講到這裏

https://www.reddit.com/r/web_design/comments/4hhs53/responsive_typography_root_fontsize_calc1vw_1vh/

來源

2016-09-07 16:29:40

我用rem代替em我的項目。它們之間的區別在於rem始終在查看文檔的根目錄，在這種情況下爲html。

然後在我的CSS我有：

html { 
    font-size: 1rem; 

    @media (min-width: 320px) { 
     font-size: 1.2rem; 
    } 

    @media (min-width: 760px) { 
     font-size: 1.5rem; 
    } 
}

這樣，所有的font-size內<html>會以正確的方式發生變化。

來源

2016-10-17 16:02:35

響應式排版的媒體查詢

回答

相關問題