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

2017-12-05    标签:html    阅读:294    评论:0


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

这样看设计稿切图时一切字体大小、内容宽度全靠感觉去定义,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>


【腾讯云】云产品采购季,助力行业复工。1核2G云服务器,首年99元

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

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

文章评论(0)

登录

博主信息

头像

今天努力一点,知识一点点积累,谢谢那个曾经努力的自己!

职业:Web工程师

Email:2938039696@qq.com

学习交流群:简忆blogs技术群

项目合作:2938039696

置顶推荐

站点信息

1033运行天数

318文章数量

主题框架:Foundation5
网站地图:XML网站地图
微信公众号:扫码关注公众号
公众号

打赏本站

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