利用媒介查询实现自动缩放字体大小

html:

    

        
利用媒介查询实现文字自动缩放大小
        
利用媒介查询实现文字自动缩放大小
        
利用媒介查询实现文字自动缩放大小
        
利用媒介查询实现文字自动缩放大小
    

css

 默认字体为30px

 

 

添加媒介查询：

当手机屏幕为414px时 字体大小为16px

@media screen and (min-width:414px) {
 html,body,button,input,select,textarea {
  font-size:16px
 }
 
当手机屏幕为384px时 字体大小为14px

@media screen and (min-width:384px) {
 html,body,button,input,select,textarea {
  font-size:14px
 }
}

当手机屏幕为320px时 字体大小为12px

@media screen and (min-width:320px) {
 html,body,button,input,select,textarea {
  font-size:12px
 }
}