html – 响应式设计中的font-size和meta视口_html-js-css

概述我必须处理一个需要响应的项目.这是我第一次这样做而且我遇到了一个(可能是愚蠢的)问题. 假设我有这个非常简单的页面： <!DOCTYPE html><html><head> <style> html{font-size:18px;width:100%;height:100%;margin:0;padding:0;font-family:Verdana, Geneva 我必须处理一个需要响应的项目.这是我第一次这样做而且我遇到了一个(可能是愚蠢的)问题.

假设我有这个非常简单的页面：

<!DOCTYPE HTML><HTML><head>    <style>        HTML{Font-size:18px;wIDth:100%;height:100%;margin:0;padding:0;Font-family:Verdana,Geneva,sans-serif;}        body{Font-size:100%;wIDth:100%;height:100%;margin:0;padding:0;}    </style></head><body >    <div >        SOME TEXT TO CHECK IF EVERYTHING'S OK    </div></body></HTML>

正如所料,所有设备上的文本字体大小为1em(在此特定情况下为18px).并且,仍然可以,它在更大的设备上看起来更大(我与AndroID手机,iPhone和AndroID平板电脑相比)：两款手机看起来都相同,平板电脑更大.到现在为止还挺好.

但是,如果我添加< Meta name =“vIEwport”>我的代码中的行,如下所示：

<!DOCTYPE HTML><HTML><head>    <Meta name="vIEwport" content="wIDth=device-wIDth,initial-scale=1.0,user-scalable=no">    <style>        HTML{Font-size:18px;wIDth:100%;height:100%;margin:0;padding:0;Font-family:Verdana,sans-serif;}        body{Font-size:100%;wIDth:100%;height:100%;margin:0;padding:0;}    </style></head><body >    <div >        SOME TEXT TO CHECK IF EVERYTHING'S OK    </div></body></HTML>

现在,根据我的理解,文本看起来在所有设备上都是相同的大小.

所以,第一个问题是：我是否正在尝试做正确的事情？
如果我是：我怎样才能得到我正在寻找的行为？

谢谢！

解决方法来自谷歌 PageSpeed Insights article的跨设备字体大小易读性：

Some mobile browsers may attempt to scale Fonts for pages without a properly configured vIEwport. This scaling behavior varIEs between browsers and should not be relIEd upon to deliver legible Fonts on mobile devices.

我认为您在某些设备上注意到的扩展可能是浏览器试图制作专门用于大屏幕桌面查看的页面的产品,这些页面在移动设备上更容易访问.当您添加正确配置的视口元标记时,浏览器认为该网站已经设计为适应不同的屏幕尺寸,并且不需要采取额外的步骤来缩放文本以便易读.

首先,请继续执行properly configure your viewport,仔细考虑越来越常见的建议,即应避免最小规模,最大规模和用户可扩展,因为这些指令可以限制或禁用用户放大和缩小内容的能力您的网站,许多人依赖它作为辅助功能工具.

如果您只想更好地控制字体大小在屏幕大小和像素密度之间的变化,CSS media queries基于视口的宽度和/或高度可能是您最好的选择.例如：

@media all {    /* sets the base Font size for all user agents that support media querIEs */    HTML {        Font-size: 18px;    }}@media screen and (min-wIDth: 480px) {    /* sets a larger base Font size for vIEwports with a minimum with of 480px,e.g. tablets,desktops,jumbotrons,etc. */    HTML {        Font-size: 24px;    }}

如果您担心跨设备的文本大小的比例美学(例如,标题文本占据智能手机上的视口太多),您可以尝试使用视口单元(特别是vmin)强制文本按比例缩放的视口.但是,请注意not all browsers support viewport units consistently.此外,请注意用户的易读性需求,并谨慎使用此方法,因为文本的设计目的是流动和扩展,并迫使文本块适合视口像广告牌一样,可能会妨碍不同设备和/或眼球用户的文本可读性.

总结

以上是内存溢出为你收集整理的html – 响应式设计中的font-size和meta视口全部内容，希望文章能够帮你解决html – 响应式设计中的font-size和meta视口所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1055710.html