@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的相对的值得到改变

移动端 rem单位做适配的 媒体查询节点的更多相关文章

  1. 移动端页面使用rem来做适配

    文/九彩拼盘(简书作者)原文链接:http://www.jianshu.com/p/eb05c775d3c6著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. rem介绍 rem(font ...

  2. 移动端rem单位用法[转]

    标签: 1.rem(font size of the root element)是指相对于根元素的字体大小的单位,em(font size of the element)是指相对于父元素的字体大小的单 ...

  3. 移动端rem单位用法

    1.rem(font size of the root element)是指相对于根元素的字体大小的单位,em(font size of the element)是指相对于父元素的字体大小的单位.它们 ...

  4. 移动端rem单位和px单位换算

    rem单位是根据html元素的单位在页面根据不同的手机屏幕分辨率动态整体的按比例缩小或放大字体. 假如html{font-size: 14px;},那么1rem=14px; 一个div宽度48px,那 ...

  5. 手机端适配方案 媒体查询和flexbale

    方法一 flexible 一.npm 包安装 lib-flexible 淘宝适配方案 px2rem px自动转rem npm install lib-flexible --save npm insta ...

  6. 前端笔记之移动端&响应式(上)媒体查询&Bootstrap&动画库&zepto&velocity

    一.媒体(介)查询 1.1 基本语法 媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于检测的媒体特性有:width.height和color(等).使用媒体查询可以在不改变 ...

  7. 移动端常用的meta标签,媒体查询以及一些样式设置《转载收藏》

    <meta name="screen-orientation" content="portrait"> <meta name="fu ...

  8. 移动端rem单位适配使用

    1.适配方法 //缩放比例!function(e,t){function i(){o=1,e.devicePixelRatioValue=o,s=1/o;var t=a.createElement(& ...

  9. 移动端rem布局的适配mixin【转藏】

    /*================================================================ 以下为基于ip5 宽度320做的适配,标准html{font-si ...

随机推荐

  1. [leetcode] 21. Merge Two Sorted Lists (Easy)

    合并链表 Runtime: 4 ms, faster than 100.00% of C++ online submissions for Merge Two Sorted Lists. class ...

  2. Android系列教程之前言

    内容转载自我自己的博客 目前安卓的主流开发语言是Java,在正式开始Android系列的教程之前,需要知道一些基本内容 Android介绍 Android['ændrɔid] 是一个基于Linux 内 ...

  3. Java EE.Servlet.生成响应

    Servlet的核心职责就是根据客户端的请求生成动态响应. 1.编码类型 2.流操作(下载文件) servlet支持两种格式的输入/输出流.一种是字符输入输出流.另一种是字节输入输出流. 3.重定向

  4. linux初学者-文件权限

    linux初学者-文件权限 lunix系统都是以文件的形式存在,自然而然的就会要求不同的用户拥有不同的权限,这也是系统能够运行的根本保证,下文将对文件的权限管理进行简要的介绍. 1.文件属性的查看 - ...

  5. 使用.csv文件

    引用自:https://blog.csdn.net/vision_tung/article/details/79845758 通用爬虫:https://blog.csdn.net/Vision_Tun ...

  6. Shell基本语法---shell介绍

    简介 1. shell是在linux系统上高效运行的脚本语言 2. 主要用来开发一些实用的.自动化的小工具,而不是用来开发具有复杂业务逻辑的中大型软件 3. shell的基本命令也是linux操作系统 ...

  7. 阿里技术面全A,终面却被产品经理拉下马。。。

    大纲: 一.投递简历 二.准备面试 三.技术一面 四.健身房里的技术二面 五.产品经理的死亡三面 六.总结 一.投递简历 找内推.大公司投简历尽量找内推,无论是校招还是社招.校招可以去牛客网或知乎找, ...

  8. 补充Java面试记录

    补充Java面试记录 背景:这两天面试遇到的部分问题都分散在了前面两篇文摘中,这里再做一些其他的记录,以备不时之需! 一.谈谈你对SpringBoot的理解? SpringBoot简介:SpringB ...

  9. Appium+python自动化(二十七)-让你在手机找到溜冰一样的感觉666,溜得飞起来 - 低级滑动(超详解)

    简介 随着现在智能手机的普及和应用,小到五六岁或者更小的娃娃,老至七八十岁老头老太太都是智能手机的用户,基本上达到每个人都在用,每次在地铁或者公交上,就看看到这样的场面,手指不停地在手机屏幕上来来回回 ...

  10. 【原创】TextCNN原理详解(一)

    ​ 最近一直在研究textCNN算法,准备写一个系列,每周更新一篇,大致包括以下内容: TextCNN基本原理和优劣势 TextCNN代码详解(附Github链接) TextCNN模型实践迭代经验总结 ...