@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. 手把手教你破解文件密码、wifi密码、网页密码

    手把手教你破解文件密码.wifi密码.网页密码 1.破解文件密码: 有时候我们在网上下载一个压缩包后,必须要关注或者支付一定费用才给你解压密码,实属比较恶心.在这里手把手叫你实现破解文件解压密码. 1 ...

  2. [PXE] Linux(centos6)中PXE 服务器搭建,PXE安装、启动及PXE理论详解

    [PXE] Linux(centos6)中PXE 服务器搭建,PXE安装.启动及PXE理论详解 本篇blog主要讲述了[PXE] linux(centos)PXE无盘服务器搭建,安装,启动及pxe协议 ...

  3. 那些年,想和你一起认识的SpringCloud Eureka

    前几天鲁班LB跟我说:你玩把游戏都要半个钟啦,为何不用这时间来看看书,如果涨工资还可以帮我买个皮肤. 面对如此合理的这需求,但我不以为然,事实上并不是我不想学习,而是 ↓ 实力不允许呀~ 直到有一天, ...

  4. jenkins下使用python虚拟环境

    jenkins下使用python虚拟环境碰到的一些坑: 1. 构建使用window批处理 - 坑1 c: cd c:\xxxxx\xxxxx\scripts activate c: cd c:\xxx ...

  5. 【iOS】“找不到使用指定主机名的服务器”

    今天用 Application Loader 提交 APP 的时,遇到了这个奇葩的问题,如下图: 后来换个网络解决了……我也不知道什么原因,就这么奇葩的弄好了……

  6. linux字符设备驱动中内核如何调用驱动入口函数 一点记录

    /* 内核如何调用驱动入口函数 ? *//* 答: 使用module_init()函数,module_init()函数定义一个结构体,这个结构体里面有一个函数指针,指向first_drv_init() ...

  7. 从动态代理到Spring AOP(中)

    一.前言 上一章节主要介绍了JDK动态代理和CGLIB动态代理:https://www.cnblogs.com/GrimMjx/p/11194283.html 这一章主要结合我们之前学习的动态代理的基 ...

  8. 免安装版tomcat安装成服务

    安装方式(前提已经安装好了jdk,并配置了环境量): (1) 下载非exe的tomcat zip包: (2) 解压缩,如:D:\tomcat: (3) 进入D:\tomcat\bin,修改servic ...

  9. cogs 1317. 数列操作C 区间修改 区间查询

    1317. 数列操作C ★★★   输入文件:shuliec.in   输出文件:shuliec.out   简单对比时间限制:1 s   内存限制:128 MB [题目描述] 假设有一个长度为 n( ...

  10. fiddler设置断点

    1.有两种方法设置断点 before response:也就是发送请求之后,但是Fiddler代理中转之前,这时可以修改请求的数据 after response:也就是服务器响应之后,但是在Fiddl ...