如何在許多設備上將標題設置爲一致的大小？

我一直在嘗試爲自己創建自適應網站模板，我希望主要是從頭開始。如何在許多設備上將標題設置爲一致的大小？

我一直無法獲得頭部大小。

我有什麼，我這裏寫的：

header { 
    background: #222; 
    height: 60px; 
    line-height: 60px; 
    transition: top 0.2s linear; 
    width: 100%; 
    overflow: hidden; 
    text-align: center; 
} 

.hidden-header-fixed { 
    top: -60px; 
    position: fixed; 
} 
.visible-header-fixed { 
    top: 0px; 
    position: fixed; 
} 

.visible-header-abs { 
    position: absolute; 
} 

#logo { 
    display:inline; 
    font-size: 30px; 
    color: #eee; 
    text-transform: uppercase; 
    letter-spacing: -1px; 
    font-weight: bold; 
    font-family: 'Lato', sans-serif; 
    text-align: center; 
    width: 200px; 
} 

#logo:hover { 
    color: #aaa; 
    text-decoration: none; 
} 

.menu-button { 
    height: 40px; 
    width: 40px; 
    background: #eee; 
    display:inline; 
    float: right; 
    margin: 10px; 
    border-radius: 20px; 
}

在上下文中的位置：http://jsfiddle.net/7mc3oczp/

當我查看我的手機上的網頁，雖然它看起來像這樣：

enter image description here

標題太小而無法使用。我看到其他網站的頭部高度不變，可以很好地轉換到我的手機瀏覽器，這是如何實現的？爲什麼我放大到目前爲止？

來源

2014-12-22 Allen Blank

有兩種選擇。

可以使用媒體查詢爲不同的設備編寫自己的代碼，在第一次檢查，列出你的破發點&改變代碼的部分。這是非常繁瑣和耗時的過程。
你可以使用框架來做到這一點。使用twitter bootstrap管理響應更容易，學習起來很簡單。檢查http://getbootstrap.com，然後使用格式修改您的代碼。

來源

2014-12-22 06:22:51 Jobayer

這就是我希望避免的，但我想你是對的。感謝您抽出時間，給予問題一個範圍感。 –

您是否嘗試將比例因子添加到您的頁面？

<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" >

來源

2014-12-22 06:18:39 Yury

如何在許多設備上將標題設置爲一致的大小？

回答

相關問題