如何使字体大小响应不同大小的设备与一次声明[副本]

Question

null

.heading{font-size: 50px;}

@media all and (min-width: 768px) and (max-width: 800px){
  .heading{font-size: 40px;}
}

@media all and (min-width: 400px) and (max-width: 480px){
  .heading{font-size: 30px;}
}

@media all and (min-width: 320px) and (max-width: 375px){
 .heading{font-size: 20px;}
}

<h1 class="heading">Font size issue for different devices</h1>

null

Answer 1

对响应性网站使用em。em是web文档媒体中使用的可伸缩单元。em等于当前字体大小，例如，如果文档的字体大小为12pt，1em等于12pt

null

.heading{font-size: 1.6em;}

@media (max-width: 800px){
  .heading{font-size: 1.4;}
}

@media (max-width: 480px){
  .heading{font-size: 1.2em;}
}

@media (max-width: 375px){
 .heading{font-size: 1em;}
}

<h1 class="heading">Font size issue for different devices</h1>

Answer 2

**.heading{font-size: 20vw;}
==============
@media (max-width: 800px){
  .heading{font-size: 16vw;}
}
==============
@media (max-width: 480px){
  .heading{font-size: 14vw;}
}
==============
@media (max-width: 375px){
 .heading{font-size: 12vw;}
}
==============
 - List item
# vw doest not support in safari browser #