一、屏幕宽度 / 设计稿宽度 *100 来设置根元素的 font-size   10px = 0.10rem

(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth>=){
docEl.style.fontSize = '100px';
}else{
docEl.style.fontSize = * (clientWidth / ) + 'px';
}
}; if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

二、

const MAX_FONT_SIZE = ;

document.addEventListener('DOMContentLoaded', () => {
const html = document.querySelector('html');
let fontSize = window.innerWidth / ;
fontSize = fontSize > MAX_FONT_SIZE ? MAX_FONT_SIZE : fontSize;
html.style.fontSize = fontSize + 'px';
});
// 以 Iphone 6、6s、7、8 为设计基础。
// 定义预计根元素 fontSize。
$rootFontSize: / ;
// 定义像素转化为 rem 函数
@function px2rem ($px) {
@return $px / $rootFontSize + rem;
}

三、一套视觉稿适配所有移动设备的js框架:pageresponse

  GitHub:https://github.com/peunzhang/pageResponse

  • 用transform:scale缩放页面,要求视觉稿高清
  • 页面以px为单位即可让h5适配各种移动设备,适配原则根据视觉稿比例缩放页面

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

  1. Vue将px转化为rem适配移动端

    Vue将px转化为rem适配移动端 1.下载lib-flexible我使用的是vue-cli+webpack,所以是通过npm来安装的npm i lib-flexible --save 2.引入lib ...

  2. 本周汇总 动态rem适配移动端/块状元素居中/透明度

    1.动态rem适配移动端 !function(){ var width = document.documentElement.clientWidth; var head=document.getEle ...

  3. 用rem适配移动端

    常见方式: 1. 固定宽度(320)做法:这样前端倒是爽了,可是大页面两边有留白,小页面图标文字又会缩的很小,用户体验极其不好. 2. 流式布局:其实就是用%,这样宽度倒还差不多,高度怎么搞?所以这种 ...

  4. 移动端使用rem适配及相关问题

    移动端适配方案,说多也很多.可以使用百分比布局,但百分比与em都是基于父元素进行计算的,在实际应用中不是很方便.使用rem不仅可以设置字体大小,块大小也可以设置.而且可以良好的适配各种终端,所以这方案 ...

  5. 谈谈我的移动端rem适配方案

    最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...

  6. H5移动端rem适配

    /** * 移动端自适应 */ <meta name="viewport" content="width=device-width,user-scalable=no ...

  7. 移动端最强适配(rem适配之px2rem)&& 移动端结合Vuex实现简单loading加载效果

    一.rem之px2rem适配 前言:相信许多小伙伴上手移动端时面对各式各样的适配方案,挑选出一个自己觉得简便.实用.高效的适配方案是件很纠结的事情. 深有体会... 经过多个移动端项目从最初的 vie ...

  8. 关于移动端rem适配

    var num = 1 / window.devicePixelRatio; var fontSize = document.documentElement.clientWidth / 10; doc ...

  9. Rem实现移动端适配

    移动端适配 web页面跑在手机端(h5页面) 跨平台 基于webview() 基于webkit 常见适配方法 pc端采用display:inline-block,让div盒子横着排 移动web:采用定 ...

随机推荐

  1. Hadoop 学习资料

    Hadoop 学习资料 网址 官方文档 https://hadoop.apache.org/docs/r1.0.4/cn/index.html 版本文档索引 http://hadoop.apache. ...

  2. JDOJ 2982: 最大连续子段和问题

    洛谷 P1115 最大子段和 洛谷传送门 JDOJ 2982: 最大连续子段和问题 JDOJ传送门 题目描述 给出一段序列,选出其中连续且非空的一段使得这段和最大. 输入格式 第一行是一个正整数NN, ...

  3. 2016 ACM/ICPC亚洲区沈阳站

    A B C D E F G H I J K L M O O O $\varnothing$ $\varnothing$   $\varnothing$ $\varnothing$ $\varnothi ...

  4. Scrapy笔记07- 内置服务

    Scrapy笔记07- 内置服务 Scrapy使用Python内置的的日志系统来记录事件日志. 日志配置 LOG_ENABLED = true LOG_ENCODING = "utf-8&q ...

  5. 使用kubernetes管理包的常用命令

    常用命令是: ## 获取指定命名空间(rubikt)下所有的部署的服务 kubectl.exe get deployments --namespace rubikt ## 获取制定命名空间(rubik ...

  6. 每日一问:你了解 Java 虚拟机结构么?

    对于从事 C/C++ 程序员开发的小伙伴来说,在内存管理领域非常头疼,因为他们总是需要对每一个 new 操作去写配对的 delete/free 代码.而对于我们 Android 乃至 Java 程序员 ...

  7. 不了解这12个语法糖,别说你会Java!

    阅读本文大概需要 10 分钟. 作者:Hollis 本文从 Java 编译原理角度,深入字节码及 class 文件,抽丝剥茧,了解 Java 中的语法糖原理及用法,帮助大家在学会如何使用 Java 语 ...

  8. 缓存穿透 & 缓存击穿 & 缓存雪崩

    参考文档: 缓存穿透和缓存失效的预防和解决:https://blog.csdn.net/qq_16681169/article/details/75138876 缓存穿透 缓存穿透是指查询一个一定不存 ...

  9. Linux+Nginx+Supervisor部署ASP.NET Core实操手册

    一.课程介绍 在上一节课程<ASP.NET Core托管和部署Linux实操演练手册>中我们学过net core的部署方式多样性和灵活性.我们通过远程工具输入dotnet 程序集名称.dl ...

  10. JAVA数学函数与常量

    在JAVA中,没有幂运算,因此需要借助于Math类的pow方法. double y = Math.pow(x,a) Math类提供了一些常用的三角函数: Math.sin Math.cos Math. ...