android CSS处理大小时改变移动的的系统字体大小

jjjwad0x 于 2023-04-28 发布在 Android

关注(0)|答案(1)|浏览(171)

当用户在移动的中更改系统字体大小时，我找不到一个好的解决方案来克服糟糕的UI。
我希望文本、按钮和任何东西都保持在一个合理的大小（不太小也不太大），以显示一个漂亮的UI，而不会有任何东西相互重叠或从屏幕上切掉。我知道如何正常地做到这一点，但不是当系统的字体大小改变时（即：与屏幕\容器宽度无关）。
例如：
1.如果我有一个标题***我的标题示例***我总是可以把它分成2-3行。
1.如果我有一个标题***注册***，它几乎遍布了一个普通的移动的屏幕宽度。改变系统的字体大小会导致奇怪的显示。显然，我不想省略它（即***注册...***）。
有什么建议吗？

android

来源：https://stackoverflow.com/questions/76099849/css-handling-sizes-when-changing-mobiles-system-font-size

1条答案

按热度按时间

c86crjj01#

em和rem是构建依赖于用户字体大小的响应式UI的好起点。
正如问题中的评论所讨论的，我们可以考虑屏幕尺寸和像素密度，以确保UI在一定程度上始终可见。幸运的是，还有其他单元，如vw，vh，vmin，vmax，以确保它在视口中看起来足够好。
这里有一个例子，应该尽最大努力适应所有场景中的一切，并且除了设备太小之外，还尊重用户的默认字体大小：

/* The main magic is here, rem refers to the font-size specified by html */
html {
  font-size: min(4vw, 1rem);
}

/* Use rem / em everywhere in your design */
h1 {
  font-family: monospace;
  font-size: 1rem;
  text-align: center;
  margin: 0;
  line-height: 1;
  height: 3em;
  background: yellow;
  display: flex;
  align-items: center;
  justify-content: center;
}

div {
  background: green;
  height: 3rem;
  width: 3rem;
  position: fixed;
  bottom: 0.5rem;
  right: 0.5rem;
}

/* Other styles that are irrelevant */
body {
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <h1>
      The layout will try to scale proportionally when the width is too small
    </h1>
    <div></div>
  </body>
</html>

赞(0）回复(0）举报 2023-04-28

我来回答

android CSS处理大小时改变移动的的系统字体大小

1条答案

相关问题

热门标签

最新问答