一、 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. 聚类——GAKFCM的matlab程序

    聚类——GAKFCM的matlab程序 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 在聚类——GAKFCM文章中已介绍了GAKFCM算法的理论知识, ...

  2. ES5-ES6-ES7_字符串扩展—模板字符串

    includes(), startsWith(), endsWith() 传统上,JavaScript只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中.ES6又提供了三种新方法 ...

  3. P2066 机器分配 DP

    题目描述 总公司拥有高效设备M台,准备分给下属的N个分公司.各分公司若获得这些设备,可以为国家提供一定的盈利.问:如何分配这M台设备才能使国家得到的盈利最大?求出最大盈利值.其中M≤15,N≤10.分 ...

  4. centos7下安装docker（25docker swarm---replicated mode&global mode）

    swarm可以在service创建或运行过程中灵活的通过--replicas调整容器的副本数量,内部调整调度器则会根据当前集群资源使用的情况在不同的node上启动或停止容器,这就是service默认的 ...

  5. vue与jquey

    vue与jquey jQuery是使用选择器($)选取DOM对象,对其进行赋值.取值.事件绑定等操作,其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象,而数据和界面是在一起的.比如需要 ...

  6. 转://云和恩墨的两道Oracle面试题

    真题1. 对于一个NUMBER(1)的列,如果查询中的WHERE条件分别是大于3和大于等于4,那么这二者是否等价? 答案:首先对于查询结果而言,二者没有任何区别.从这一点上讲无论是指定大于3还是指定大 ...

  7. Idea自带工具解决冲突

    1:产生冲突 2:解决冲突 解决冲突具体操作: 手动合并代码: 此时点击的是local的>:点击changes的X则合并效果为: 也可以两侧都点击>.结果为: 也可以都点击X,结果为: 最 ...

  8. Linux：Day11(上) ifcfg命令

    将Linux主机接入到网络中: 配置方式: 静态指定: ifcfg:ifconfig,route,netstat ip:object{link,addr,route},ss,tc 配置文件:syste ...

  9. 【window】git安装教程

    相关链接:https://blog.csdn.net/nly19900820/article/details/73379854 作者:smile.轉角 QQ:493177502

  10. （四）surging 微服务框架使用系列之网关 转载

    一.什么是API网关 API网关是一个服务器,是系统对外的唯一入口.API网关封装了系统内部架构,为每个客户端提供一个定制的API.API网关方式的核心要点是,所有的客户端和消费端都通过统一的网关接入 ...