如何在Materialise中使字体大小响应

时间:2018-02-28 18:47:29

标签: css fonts media-queries materialize responsive

我在实体化中遇到字体大小问题。如果我的客户端设备变得更小,文本大小没有响应,它们是如此之小。一个解决方案是为每个客户端devies使用@media查询。这不是我的解决方案,因为实现本身有媒体查询,我不想再次重写它们。有没有办法让文本在实现中有所回应? 感谢

2 个答案:

答案 0 :(得分:2)

谢谢约翰!

我创建了这个附加组件,以使用materialize来促进字体大小:

/*  fontSize: */
.xs   {font-size: 0.75rem}
.sm   {font-size: 0.875rem}
.base {font-size: 1rem}
.lg   {font-size: 1.125rem}
.xl   {font-size: 1.25rem}
.2xl  {font-size: 1.5rem}
.3xl  {font-size: 1.875rem}
.4xl  {font-size: 2.25rem}
.5xl  {font-size: 3rem}
.6xl  {font-size: 4rem}
.fs1  {font-size: 1vw}
.fs2  {font-size: 1.4vw}
.fs3  {font-size: 1.6vw}
.fs4  {font-size: 1.8vw}
.fs5  {font-size: 2vw}
.fs6  {font-size: 2.2vw}
.fs7  {font-size: 2.4vw}
.fs8  {font-size: 2.6vw}

%font-size的唯一问题是从移动(太小)到大屏幕(太大)的文本大小都太可变了

答案 1 :(得分:0)

也许font-size:5vw其中5将是视口的5%。或者每个vw单位是视口宽度的1%

<!DOCTYPE html>
<html>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <body>
        <div style="font-size:5vw;text-align:center;">This is Some Responsive Text</div>
    </body>
</html>