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
**.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 #
对响应性网站使用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>