【上海校区】 专攻小班JS前端培训
当前位置:  主页 > 前端动态 >

移动端字体大小适应屏幕大小的方法-百读易莱胜

2019-04-26/09:04:02

移动端字体大小适应屏幕大小的方法

前端开发中,移动端字体大小的随浏览器屏幕的大小改变而改变的2种方法

---1.通过媒体查询实现:

@media screen and (min-width: 720px) {
   
html {
       
font-size:26px
   
}
}
@media screen and (max-width: 640px) {
   
html {
       
font-size:24px;
    }
}

@media screen and (max-width: 540px) {
   
html {
       
font-size:22px;
    }
}

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

@media screen and (max-width: 400px) {
   
html {
        
font-size:18px;
    }
}

@media screen and (max-width: 360px) {
   
html {
       
font-size:16px;
    }
}

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

@media screen and (max-width: 240px) {
   
html {
       
font-size:12px;
    }
}

然后在页面中字体大小,包括尺寸单位可以使用rem 这样就可以与上面媒体查询里面

设置的字体进行相对的参考了  实现 页面整体放大或缩小 比如

button{
   
background: none;
   
border:1px solid white;
   
color:white;
   
width:5.857rem;height:1.857rem;
   
margin-left:0.714rem;
   
margin-top:0.643rem;
    
border-radius: 0.357rem;
   
font-size: 0.857rem;
}

--2.通过js来改变html标签的字体大小

<script>
window.onresize=function(){

           document.documentElement.style.fontSize=document.documentElement.clientWidth/10+"px"
}
document.documentElement.style.fontSize=document.documentElement.clientWidth/10+"px"
</script>

最后页面字体使用rem单位即可

以上2种方法是常见的字体大小改变写法

如果你对css学习有兴趣的话可以 学习css雪碧图


+相关文章推荐+