博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
rem简单实现移动端适配
阅读量:6122 次
发布时间:2019-06-21

本文共 913 字,大约阅读时间需要 3 分钟。

rem:移动web开发
  • 默认字体大小是16px

  • <html>中设置字体大小

  • 与em的区别:

    • em是在父级设置字体大小受影响
  • 移动端适配

    • 首先获取屏幕的宽度

    • 计算当前屏幕宽度和640的比例

    • 计算出font-size的值

    • 改变html的font-size的值

    
rem

这是一个p

  • 第一种:

    window.onresize = function(){    var html = document.getElementsByTagName('html')[0];    var width = html.offsetWidth;    console.log(width);    html.style.fontSize = (width>=640?640:width)/640*100 + 'px';};
  • 第二种:

    var html = document.getElementsByTagName('html')[0];     if(html){         var w = window.innerWidth;         var fontSize = (w>640?640:w)/640 * 100;         html.style.fontSize = fontSize + 'px';     }     window.onload = function(){         window.onresize = function(){             var w = window.innerWidth;             console.log(w);             var fontSize = (w>640?640:w)/640 * 100;             html.style.fontSize = fontSize + 'px';         }     }

转载于:https://www.cnblogs.com/PaddyWang/p/5324574.html

你可能感兴趣的文章
Mindjet MindManager 2019使用教程:
查看>>
游戏设计的基本构成要素有哪些?
查看>>
详解 CSS 绝对定位
查看>>
AOP
查看>>
我的友情链接
查看>>
NGUI Label Color Code
查看>>
.NET Core微服务之基于Polly+AspectCore实现熔断与降级机制
查看>>
vue组件开发练习--焦点图切换
查看>>
浅谈OSI七层模型
查看>>
Webpack 2 中一些常见的优化措施
查看>>
移动端响应式
查看>>
python实现牛顿法求解求解最小值(包括拟牛顿法)【最优化课程笔记】
查看>>
js中var、let、const的区别
查看>>
腾讯云加入LoRa联盟成为发起成员,加速推动物联网到智联网的进化
查看>>
从Python2到Python3:超百万行代码迁移实践
查看>>
Windows Server已可安装Docker,Azure开始支持Mesosphere
查看>>
简洁优雅地实现夜间模式
查看>>
react学习总结
查看>>
微软正式发布PowerShell Core 6.0
查看>>
Amazon发布新的会话管理器
查看>>