关于自动文本大小的 html 5 查询答案

【问题标题】：html 5 query on auto text size关于自动文本大小的 html 5 查询
【发布时间】：2014-02-18 19:02:51
【问题描述】：

我的问题是根据视口屏幕分辨率调整文本大小，以便文本不会出现在两行中。例如访问http://www.asti.inetsavy.com/rushi/

在这里，当你打开那个链接时，右键点击可以知道源代码。

和我的 CSS 当您从上面的链接中单击 index.css 时，可以下载文件如果你不能从那里下载它从这里下载它

https://www.mediafire.com/?jh2q3e9dfmpvsyq

如果视口屏幕分辨率不同，则左上角的图像（主页和其他两个）出现在下一行，导航菜单也出现在两行中。所以请告诉我解决方案

在我的屏幕上，文本很好，因为您在 1600*900 中查看但在其他分辨率的情况下，用户必须根据自己的分辨率调整大小或缩小。

【问题讨论】：

提供jsfiddle。
好吧，然后使用媒体查询来调整字体大小。顺便说一句，恕我直言，设计比字体大小有更大的问题……哦，它伤害了我的眼睛。快，找到标签关闭按钮……啊，更好。
你能把你看到的问题列出来吗

标签： html css web

【解决方案1】：

您可能想要检查 CSS 媒体查询，这正是您所需要的

例子：

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
    p {
       font-size: 13px;
    }
}

这将仅在智能手机上将文本大小调整为 13 像素

Mozilla article on Media queries

【讨论】：

感谢您的建议..我了解到我需要对媒体查询做一些事情，但我不知道在 html 或 css 文档中实现它
试试这个：将这个添加到你的部分中的 html <meta name="viewport" content="width=device-width, user-scalable=no"> 然后将上面的代码添加到你的 CSS 文件中，当你调整浏览器大小时它应该将文本缩小到 13 像素窗口。