一、 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. Beta冲刺博客汇总（麻瓜制造者）

    Beta冲刺博客 Beta冲刺(1/5)(麻瓜制造者) Beta冲刺(2/5)(麻瓜制造者) Beta冲刺(3/5)(麻瓜制造者) Beta冲刺(4/5)(麻瓜制造者) Beta冲刺(5/5)(麻瓜制 ...

  2. 【C编程基础】多线程编程

    基础知识 1.基本概念 (1)线程,即轻量级进程(LWP:LightWeight Process),是程序执行流的最小单元. 线程是进程中的一个实体,是被系统独立调度和分派的基本单位. (2)线程同步 ...

  3. 【技术与商业案例解读笔记】095：Google大数据三驾马车笔记

     1.谷歌三驾马车地位 [关键词]开启时代,指明方向 聊起大数据,我们通常言必称谷歌,谷歌有“三驾马车”:谷歌文件系统(GFS).MapReduce和BigTable.谷歌的“三驾马车”开启了大数据时 ...

  4. 使用Intellij IDEA将web项目导出为war包

    前言:IDEA导出war包的方式与MyEclipse有一点不同,使笔者在使用的时候有点困惑,在网上查阅相关资料的时候,发现其描述十分不清晰,于是就有了这篇随笔的诞生.话不多说,直接进入正题. 注:ID ...

  5. 为什么二流程序员都喜欢黑php？

    为什么二流程序员都喜欢黑php? 为什么程序员都喜欢黑php?这个嘛!你骂一句php是垃圾试试,保准php程序员不揍扁你!这就好像自己的母校,纵然有很多不好的地方,但是只允许自己调侃,不允许外人骂半句 ...

  6. CSS--块级元素和行内元素

    相同:设置后,对应的模块都会脱离文档流 不同点:position相应的块级元素会覆盖下面的内容(文字,),而float只会覆盖块级元素,里面的文字会脱离 出来 float是浮动定位,position是 ...

  7. spool

    一.常用设置 set lin 1000 --一行可容纳字符数{80|n};输出大于设置值,则折行显示set wrap on --输出行长度大于设置长度时(set lin n设置);值为on,多余字符另 ...

  8. 测试 Flask 应用

    测试 Flask 应用 没有经过测试的东西都是不完整的 这一箴言的起源已经不可考了,尽管他不是完全正确的,但是仍然离真理不远.没有测试过的应用将会使得提高现有代码质量很困难,二不测试应用程序的开发者, ...

  9. ASM problem : ORA-15001: diskgroup "DGROUP1" does not exist or is not mounted ORA-15040: diskgroup is incomplete

    ============================================================= mos中的详细解释: ODA: After Apply ODA 12.2.1 ...

  10. 学号 20175329 2018-2019-3《Java程序设计》第四周学习总结

    学号 20175329 2018-2019-3<Java程序设计>第四周学习总结 教材学习内容总结 第五章 上周学习的第四章是体现了数据的封装,本章第五章主要是体现出对象的另外两个方面的重 ...