手机端自适应字体大小和元素宽度自适应

2017-12-05   阅读:693   分类:前端    标签: html

以前在做手机端页面时候通过媒体查询的方法定义字体或者宽高。

这样看设计稿切图时一切字体大小、内容宽度全靠感觉去定义,media定义好之后,拿起键盘就是干。

字体、宽高都用rem来定义,此方法略爽!

@media (min-width:0px){
    html{font-size:12px;}}
@media (min-width: 320px){
    html{font-size:12px;}}
@media (min-width: 340px){
    html{font-size:13px;}}
@media (min-width: 360px){
    html{font-size:14px;}}
@media (min-width: 380px){
    html{font-size:15px;}}
@media (min-width: 400px){
    html{font-size:15px;}}
@media (min-width: 420px){
    html{font-size:16px;}}

现在找到了一个方法,页面插入一段js,切图时看设计稿多宽页面就定义多大的宽度,字体的大小和内容的宽高就看设计稿的px

比如是24px,那么写样式就是1.5rem

这个时候牵扯算法1rem = 16px

<script type="text/javascript">    
    function fontSize(){        
        var deviceWidth=document.documentElement.clientWidth>640?640:document.documentElement.clientWidth;
    document.documentElement.style.fontSize=(deviceWidth/25)+"px";    
   }
    fontSize();
    window.onresize=fontSize;
</script>


【腾讯云】11.11 云上盛惠,云产品限时抢购,1核2G云服务器首年88元

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/fdetail/21.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

上一篇:没有更多了文章

下一篇: TP5搜索分页

文章评论(0)

登录
简忆博客壁纸 头像

简忆博客
仕而优则学,学而优则仕。

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×