Question

我创建了一个页面。它应该响应桌面，移动设备和平板电脑。

每当调整除字体以外的页面时看起来都是响应式的。但在移动设备中字体大小保持不变。它占据了主要空间，也不是用户友好的。

如何做出反应？

我的样本css：

body {
    font-size : 36px;
 }

我在这里使用px我听说vw会给予回应，但我不知道它是如何运作的。这是最好的字体属性？

或者是否有可用的引导样式？

Answer 1

使用不同的度量单位：

body {
  font-size : 2em;
}

Answer 2

尝试使用媒体查询

@media screen and (max-width: 420px){
   body {
     font-size : 25px;
   }
}

@media screen and (max-width: 320px){
   body {
     font-size : 20px;
   }
}

Answer 3

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

1vw =视口宽度的1％

1vh =视口高度的1％

1vmin = 1vw或1vh，取较小者

1vmax = 1vw或1vh，取较大者

Answer 4

我还没有用过这个，但是你应该能够使用百分比，给你的身体你的＆＃34; base-font-size＆＃34;，并从那里开始使用百分比。

html, body {
  font-size: 14px;
}

.some-element {
  font-size: 120%;
}

另一种选择是使用REM

使用css / Bootstrap响应字体大小

4 个答案: