css - iphone 上的字体大小

Question

我正在使用来自 zurb 的以下电子邮件模板(我选择了基本模板)

http://zurb.com/playground/responsive-email-templates http://zurb.com/playground/projects/responsive-email-templates/basic.html

其中包括以下媒体查询:

@media only screen and (max-width: 600px) {
    a[class="btn"] { display:block!important; margin-bottom:10px!important; background-image:none!important; margin-right:0!important;}
    div[class="column"] { width: auto!important; float:none!important;}
    table.social div[class="column"] {
        width:auto!important;
    }
}

手机上的字体看起来非常小特别是表格单元格内的文字非常小

如何覆盖手机上的字体？

Answer 1

也许您能做的最好的事情就是浏览文件并将所有字体大小从 px 更改为 em。然而，1em 等于 12px，所以你必须做一些数学运算才能得到正确的数字。然后，您可以将样式添加到

正文 {font-size: 120%;}

这会将字体大小更改为正常大小的 120%。您可以将其更改为您喜欢的任何百分比，它会根据您为每个元素提供的 em 值更改所有字体。然后，如果您想一次更改所有字体大小，只需更改该百分比……那么您就不会失去比例。您还可以通过将 font-size:100% 添加到 body 元素来保持桌面不变。然后，在媒体查询中，您可以将 body font-size 设置为 120% 之类的值。