如何设置相对于屏幕分辨率的文本字体

时间:2015-07-21 03:07:25

标签: html css

<!DOCTYPE html>
<html>
<head>
<title>Algoranker</title>
<style type="text/css">
div.top{
  width:100%;
  height:10%;
  text-align: center;
  color: white;
  background-color: #474747;
}
p{
  margin-top: 0px;
}
html,body{
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}
</style>
</head>
<body >
<div class="top" >
<p>Testing</p>
</div>
</body>
</html>

如何使测试p标签中的文字根据屏幕分辨率而变化我尝试使用font-size:10%,但没有变化,任何人都建议我使用方法

2 个答案:

答案 0 :(得分:2)

如果您希望根据屏幕宽度调整大小,我建议x <- as.matrix(read.csv(text="start,A,T,G,C,REF,ALT,TYPE chr20:5363934,95,29,14,59,C,T,snp chr5:8529759,24,1,28,41,G,C,snp chr14:9620689,65,49,41,96,T,G,snp chr18:547375,94,1,51,67,G,C,snp chr8:5952145,27,80,25,96,T,T,snp chr14:8694382,68,94,26,30,A,A,snp chr16:2530921,49,15,79,72,A,T,snp:2530921 chr16:2530921,49,15,79,72,A,G,snp:2530921 chr16:2530921,49,15,79,72,A,T,snp:2530921flat chr16:2533924,42,13,19,52,G,T,snp:2533924flat chr16:2543344,4,13,13,42,G,T,snp:2543344flat chr16:2543344,4,23,13,42,G,A,snp:2543344 chr14:4214117,73,49,18,77,G,A,snp chr4:7799768,36,28,1,16,C,A,snp chr3:9141263,27,41,93,90,A,A,snp", stringsAsFactors=FALSE)) 单位。

小提琴:https://jsfiddle.net/tey035zv/

答案 1 :(得分:0)

嗨我想建议你这个链接引用只是因为它支持response-ness

我相信使用这个

https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/

只需申请

 font-size : 5vw;