Question

我正在尝试创建一个响应式网站但我意识到我的一些单词太大而无法在移动屏幕上显示。结果，屏幕变得超过100％宽，因此变得可滚动并失去其艺术感。

我该如何避免这种情况？我怎么知道什么字体会使我的标题词跨越移动视图？什么是最佳实践？

Answer 1

尝试flowtype.js http://simplefocus.com/flowtype/ 这将帮助您在不同的平台/设备大小上拥有灵活的字体大小。您还可以设置字体的最小和最大尺寸

Answer 2

您很可能必须设置一些@media屏幕规则;

@media screen and (min-width: 480px) {}

然后，您可以为特定宽度指定基本字体大小。因此，对于每个媒体屏幕，设置像;

这样的字体

html{font-size: x pt;}

然后，您可以通过添加font-size:x rem;

来控制不同元素中的特定字体大小

我认为这就是所有网络开发者所做的事情。如果没有得到最佳的＆＃34;几乎不可能避免media screen。结果

另外，请勿忘记HTML中的<meta name="viewport" content="width=device-width, initial-scale=1.0">。

Answer 3

您可以针对特定小部件尝试word-break: break-all;。这将允许在单个单词之间换行。

Answer 4

首先，要避免可滚动内容，您必须设置max-width=100%，以便内容不会从容器中移出。

现在，为了获得字体大小的良好效果，您可以使用单位em而不是px。您可以轻松找到em-> px转换器。另请阅读这篇关于您的问题的优秀文章。