@media screen and (min-width:300px){html,body,input{font-size:15px}}
@media screen and (min-width:320px){html,body,input{font-size:16px}}
@media screen and (min-width:340px){html,body,input{font-size:17px}}
@media screen and (min-width:360px){html,body,input{font-size:18px}}
@media screen and (min-width:375px){html,body,input{font-size:18.75px}}
@media screen and (min-width:380px){html,body,input{font-size:19px}}
@media screen and (min-width:400px){html,body,input{font-size:20px}}
@media screen and (min-width:414px){html,body,input{font-size:20.7px}}
@media screen and (min-width:420px){html,body,input{font-size:21px}}
@media screen and (min-width:440px){html,body,input{font-size:22px}}
@media screen and (min-width:460px){html,body,input{font-size:23px}}
@media screen and (min-width:480px){html,body,input{font-size:24px}}
@media screen and (min-width:500px){html,body,input{font-size:25px}}
@media screen and (min-width:520px){html,body,input{font-size:26px}}
@media screen and (min-width:540px){html,body,input{font-size:27px}}
@media screen and (min-width:560px){html,body,input{font-size:28px}}
@media screen and (min-width:580px){html,body,input{font-size:29px}}
@media screen and (min-width:600px){html,body,input{font-size:30px}}
@media screen and (min-width:620px){html,body,input{font-size:31px}}
@media screen and (min-width:640px){html,body,input{font-size:32px}}
@media screen and (min-width:660px){html,body,input{font-size:33px}}
@media screen and (min-width:680px){html,body,input{font-size:34px}}
@media screen and (min-width:700px){html,body,input{font-size:35px}}
@media screen and (min-width:720px){html,body,input{font-size:36px}}
@media screen and (min-width:740px){html,body,input{font-size:37px}}
@media screen and (min-width:760px){html,body,input{font-size:38px}}
@media screen and (min-width:780px){html,body,input{font-size:39px}}
@media screen and (min-width:800px){html,body,input{font-size:40px}}
@media screen and (min-width:1024px){html,body,input{font-size:51.2px}}
@media screen and (min-width:1349px){html,body,input{font-size:67.45px}}

也可以使用js来控制:

document.documentElement.style.fontSize = document.documentElement.clientWidth / 3.75 + 'px';//设计稿是375px ,HTML的font-size:100px;
window.onresize = function () {
document.documentElement.style.fontSize = document.documentElement.clientWidth / 3.75 + 'px';
}
通过以上方式使得设备宽度变化时,对应的根元素html的fontsize对应的变化,从而达到rem的相对的值得到改变

最新文章

  1. Docker中部署Kubernetes
  2. 使用神经网络来识别手写数字【译】(三)- 用Python代码实现
  3. touchstart,touchmove,touchend触摸事件的小小实践心得
  4. python 中BeautifulSoup入门
  5. Lua Serial/Serialize/Serializer/Serializing 序列化/反序列化
  6. linux下搭建sock5代理
  7. 华为过滤字符串(java)
  8. USACO3.31Riding the Fences(输出欧拉路径)
  9. Hadoop 处理“Name node is in safe mode”问题(转)
  10. 几种经典排序算法的JS实现
  11. 修改Tabhost样式和字体大小和居中显示
  12. 使用AjaxFileUpload.js实现文件异步上�
  13. encodeURI()和encodeURIComponent()
  14. uedit,检测粘贴事件,替换粘贴内容
  15. VSphere虚拟化ESXi的安装及基本管理
  16. bootstrap selectpicker控件select下拉框动态数据无法回显的问题
  17. Android为TV端助力 自定义view中findViewById为空的解决办法
  18. 主席树 || 可持久化线段树 || BZOJ 3653: 谈笑风生 || Luogu P3899 [湖南集训]谈笑风生
  19. 【2017-03-02】C#集合,结构体,枚举
  20. linux之 sed 基础

热门文章

  1. [学习笔记] MySQL入门
  2. 15. Java异常处理
  3. JAVA对象实例化方式总结
  4. nginx 之负载均衡 :PHP session 跨多台服务器配置
  5. 1. 源码分析---SOFARPC可扩展的机制SPI
  6. 基于SpringBoot从零构建博客网站 - 集成editor.md开发发布文章功能
  7. 优雅的对象转换解决方案-MapStruct及其入门(一)
  8. 1、大型项目的接口自动化实践记录--robotframework环境搭建
  9. DesignPattern系列__06迪米特原则
  10. CentOS 7服务器安装brook和bbr加速