在字體VS寬度上使用em em

我在理解如何在CSS中工作時遇到問題。我試圖得到一個元素（在這種情況下div）來縮放字體的相同方式。我儘可能縮小了我的問題陳述的範圍。在字體VS寬度上使用em em

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title></title> 
    <style> 
     body { font-size: 100%; } 
     .EventReg { 
     border:solid #000000 .063em; 
     background-color:#000000; 
     padding:.625em; 
     width:13.65em; 
     } 
    </style> 
    </head> 
    <body> 
    <div style="font-size:2em;">Event Registration</div> 
    <div class="EventReg"></div> 
    </body> 
</html>

這似乎在IE，FF，和鉻正確比例的，當我改變體{字體大小：100％; }以任何其他百分比。

我期待的是我在計算機瀏覽器中看到的div和文本完全相同的長度。但是，當我用我的android智能手機檢查這個文本是比div更廣泛。

我希望文本下的div與文本寬度相同，即使縮放了。

任何想法我做錯了什麼或我的假設是錯誤的？

來源

2013-05-06 lurch3777

看看[這篇文章]（http://stackoverflow.com/questions/16288813/responsive-css-ems-wont-resize-lower-than-0-5em/16289640#16289640），我回答了它幾天前，這正是你想知道的。簡而言之：如果您沒有首先指定像素字體大小，那麼'em'代表的結果不容易預測。 – Tyblitz 2013-05-06 03:41:14

我嘗試了以下，沒有運氣：** html {font-size：16pt; }，html {font-size：16px; }，body {font-size：16pt; }，body {font-size：16px; } **。這可以在計算機瀏覽器上正確縮放，但不能在電話上縮放。 – lurch3777 2013-05-06 04:02:47

這很爛...在這種情況下，我真的很感興趣，解決這個問題... – Tyblitz 2013-05-06 04:08:47

我最終解決了這個問題，使文本成爲圖像。這對我來說不是一個理想的解決方案，但它會強制所有設備和瀏覽器上的文本相同。

來源

2014-08-29 15:32:23 lurch3777

它可能與-webkit-text-size-adjust屬性有關。嘗試添加以下樣式到您的CSS。

* { 
    -webkit-text-size-adjust:100%; 
}

在一些手機上，瀏覽器調整字體大小以使網站更具可讀性。將該屬性設置爲100％（或可能的none）應該可以防止這種情況發生。

來源

2013-05-06 03:46:17

我試過** - webkit-text-size-adjust：100％**和** - webkit-文字大小調整：無; **但不改變結果。謝謝。 – lurch3777 2013-05-06 03:57:25

在這種情況下，我認爲Jukka的回答可能會更有幫助。由於不同的默認字體，您可能會在桌面瀏覽器和移動設備之間看到不同的結果。如果將字體明確地設置爲像Arial這樣常見的字體，則可能會獲得更好的結果，但即使這樣也不能保證。 – 2013-05-07 13:27:52

沒有理由期望文本和空的div元素具有相同的寬度。文本的寬度取決於字體，並且可能在某種程度上也取決於字體呈現功能（例如字距調整）。使用em單位明確設置空的div元素的寬度。 The em unit是字體的大小，即字體的高度;它與字母的寬度或高度沒有明確的關係。

要使元素的寬度取決於另一個元素中某些文本的寬度，您需要使用表格格式或其他佈局工具。在這種情況下，如果您只需要在文本下面有一個實心矩形，您可以設置例如display: inline-block和適當的border-bottom在包含文本的元素上。

來源

2013-05-06 05:35:30

在字體VS寬度上使用em em

回答

相關問題