一、 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. python 协程、I/O模型

    一.引子 (超哥协程) 并发本质:保存状态+切换 cpu正在运行一个任务,转而执行另一个任务的情概况:1.是该任务发生了阻塞:2.该任务计算的时间过长或有一个优先级更高的程序替代了它. 协程本质上就是 ...

  2. 前端性能优化成神之路--SSR（服务端渲染）

    Nuxt.js的介绍 Nuxt.js概述 nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染).Vue.js是开发SPA(单页应用)的,Nuxt.js这个框架,用V ...

  3. WinForm下的loading框的实现

    前言:在项目使用C/S模式情况下,由于需要经常进行数据的刷新,如果直接进行刷新,会有一个等待控件重画的过程,非常的不友好,因此在这里添加一个loading框进行等待显示. 实现:在经过多方面查询资料, ...

  4. Jenkins+Ansible+Gitlab自动化部署三剑客-gitlab本地搭建

    实际操作 准备linux初始环境 关闭防火墙 systemctl stop firewalld 开机自己关闭 systemctl disable firewalld 设置安全配置 为关闭 vim /e ...

  5. Python字符串 u"string",r"string"的写法含义

    1.字符串前加 u = unicode编码 例:u"我是含有中文字符组成的字符串." 作用:后面字符串以 Unicode 格式 进行编码,一般用在中文字符串前面,防止因为源码储存格 ...

  6. 【vue】vue +element 搭建项目，要求既支持pc端又支持移动端

    使用场景:有适配pc端改为适配pc端和移动端,使用2套css 代码实现App.vue created: function () { if(document.documentElement.client ...

  7. day25 Python四个可以实现自省的函数，反射

    python面向对象中的反射:通过字符串的形式操作对象相关的属性.python中的一切事物都是对象(都可以使用反射) 四个可以实现自省的函数 下列方法适用于类和对象(一切皆对象,类本身也是一个对象) ...

  8. 分区默认segment大小变化(64k—>8M)

    _partition_large_extents和_index_partition_large_extents 参考: http://www.xifenfei.com/2013/08/%E5%88%8 ...

  9. StringRedisTemplate操作Redis

    在说到StringRedisTemplate操作Redis数据的时候,我们顺便谈谈StringRedisTemplate和RedisTemplate的区别. 一.StringRedisTemplate ...

  10. 线程的synchronized、volatile及原子操作

    public class ThreadDemo7{ //structs2线程不安全 共享变量 //n++ 复合操作 对于volatile修饰的变量不安全 //原子操作 int value; //让方法 ...