一、 rem vs em

　　

单位 定义 特点
rem font size of the root element 以根元素字体大小为基准
em font size of the element 以父元素字体大小为基准

二、js计算

为了避免造成因为动态设置<html>元素的font-size而造成页面抖动，一般这部分代码我们放在header底部去加载，并内联到html文档里面。

  <script>

    const oHtml = document.getElementsByTagName('html')[0];

    const width = oHtml.clientWidth;

    oHtml.style.fontSize = 14 * (width / 375) + "px";

  </script>

三、媒体查询

@media screen and (min-width: 375px){

    html {

        font-size: 14.0625px;

    }

}

@media screen and (min-width: 360px){

    html {

        font-size: 13.5px;

    }

}

@media screen and (min-width: 320px){

    html {

        font-size: 12px;

    }

}

html {

    font-size: 16px;

}

参考文档：

简单粗暴的移动端适配方案 - REM

rem移动端适配方案的更多相关文章

  1. H5 APP 页面移动端适配方案

    H5 APP 页面移动端适配方案 https://segmentfault.com/a/1190000011586301 https://juejin.im/post/5cbdee71f265da03 ...

  2. 基于Vue/React项目的移动端适配方案

    本文的目标是通过下文介绍的适配方案,使用vue或react开发移动端及H5的时候,不需要再关心移动设备的大小,只需要按照固定设计稿的px值布局,提升开发效率. 下文给出了本人分别使用create-re ...

  3. 移动端适配方案-rem(基础篇)

    常见移动web适配方案一般有3种方法,如下图: ①:定高,宽度百分比(一般用来做一些适配性不高的页面,比如主要以一些文字和图片为主的网页或移动端的头部和底部) ②:flex (更多的用于复杂页面的布局 ...

  4. 移动端适配方案 flexible.js

    前言 移动端适配一直以来都是前端开发中不可或缺的重要组成部分,如果没有了它,那么你做出来的页面极有可能会出现各种意外(写出来的页面与设计稿之间的差别).所有我们得找到一种相对来说让人比较满意的解决方案 ...

  5. 手淘H5移动端适配方案flexible源码分析

    移动端适配一直是一个值得探讨的问题,在业余时间我找了一些页面,查看了一些厂商对于移动端H5页面的适配方案,看到了几个典型的例子,今天就来记录一下我看到的第一个典型的例子,也是我们公司目前普通H5项目正 ...

  6. 【前端适配】vw单位移动端适配方案

    近些年移动端的强势崛起,导致移动端适配越来越重要,个人之前一直使用的是rem进行适配,但是发现并不是非常完美,给力的是大漠老师写了一篇<如何在Vue项目中使用vw实现移动端适配>,比较完美 ...

  7. h5 移动端适配方案思考

    基础概念 CSS像素(CSS pixels) 这个是浏览器使用的抽象单位,用来精确度量网页上的内容.平时经常写的width:100px;height:100px;都是与设备无关的. 设备独立像素(de ...

  8. 整理h5移动端适配方案

    <使用Flexible实现手淘H5页面的终端适配>:https://github.com/amfe/article/issues/17 <再聊移动端页面的适配>:https:/ ...

  9. 移动端适配方案以及rem和px之间的转换

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

随机推荐

  1. 弱省胡策 Magic

    弱省胡策 Magic 求\(n\)个点\(n\)的条边的简单联通图的个数. 毒瘤,还要写高精. 我们枚举环的大小\(k\),\(\displaystyle ans=\sum_{k=3}^nC_n^k ...

  2. 【COCOS2DX-游戏开发之三一】之 坐标系(下) convertToNodeSpace和convertToWorldSpace

    游戏中常常会用到一些变换: 游戏中武器和角色在一个layer上,为了效率.会考虑将bullet, effect和 PhysicsParticle分别放到不用的层上,相应的层上使用batchnode来提 ...

  3. linux下安装jdk_mysql_tomcat_redis

    目前搬我以前的笔记,每个人做笔记方式都不一样,看别人的风格,生成自己的风格 1.linux安装软件和redis学习 jdk --- java开发运行环境 Tomcat - WEB程序的服务器 Mysq ...

  4. 机器学习算法总结(十二)——流形学习（Manifold Learning）

    1.什么是流形 流形学习的观点:认为我们所能观察到的数据实际上是由一个低维流行映射到高维空间的.由于数据内部特征的限制,一些高维中的数据会产生维度上的冗余,实际上这些数据只要比较低的维度就能唯一的表示 ...

  5. 转://Oracle not in查不到应有的结果(NULL、IN、EXISTS详解)

    问题: 语句1 : Select   *   from   table1 A  where  A.col1  not   in  (  select  col1  from  table2 B )  ...

  6. Linux：Day5 shell编程初步、grep

    bash的基本特性(3) 1.提供了编程环境 程序编程风格: 过程式:以指令为中心,数据服务于指令: 对象式:以数据为中心,指令服务于数据: shell程序:提供了编程能力,解释执行:过程式.解释执行 ...

  7. >/dev/null 2>&1和2>&1 >/dev/null区别

    >/dev/null 2>&1和2>&1 >/dev/null区别 >/dev/null 2>&1 //会将标准输出,错误输出都重定向至/d ...

  8. Spring Security（十）：3. What’s New in Spring Security 4.2 （新功能）

    Among other things, Spring Security 4.2 brings early support for Spring Framework 5. You can find th ...

  9. MySQL笔记--注意

    replace into 和 insert into..... on duplicate key update的异同 同:1. 当key不存在时,两者相同,都是插入一条数据2. key存在时,执行两者 ...

  10. Java关键字(五)——this

    this 也是Java中的一个关键字,在<Java编程思想>第四版第五章5.4小节对 this 关键字是这样介绍的: this 关键字只能在方法内部使用,表示对“调用方法的那个对象”的引用 ...