window.onresize = function () {
setHtmlFz();
}
setHtmlFz();
function setHtmlFz() {
// 基础值
var baseVal = 100;
// 设计稿的宽度
var desPage = 750;
// 要适配的屏幕的宽度
var width = document.querySelector("html").offsetWidth;
// 基础值*要适配的屏幕的宽度/设计稿的宽度
var fz = baseVal * width / desPage;
// 设置到html标签中
document.querySelector("html").style.fontSize = fz + "px";
}

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

  1. rem移动端适配方案

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

  2. hotcss.js Flexible 移动端适配在dpr=2和dpr=3出现的字体大小设置不正确问题.

    这段时间一直在用hotcss做移动端适配,做了几个页面没有发现什么问题,后来老大要加快进度,我把项目分出一块给另一个同事做,她发现了一个问题就是字体在dpr=2,dpr=3,的设备上字体大小显示老是不 ...

  3. rem移动端适配

    rem作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The f ...

  4. MetaHandler.js:移动端适配各种屏幕

    MetaHandler.js !function () { var opt = function() { var ua = navigator.userAgent, android = ua.matc ...

  5. rem 移动端适配

    1.从网易与淘宝的font-size思考前端设计稿与工作流 http://www.cnblogs.com/lyzg/p/4877277.html 2.淘宝弹性布局方案lib-flexible实践 ht ...

  6. 30行js rem弹性布局适配所有分辨率

    <script> /* # 按照宽高比例设定html字体, width=device-width initial-scale=1版 # @pargam win 窗口window对象 # @ ...

  7. 移动端适配-rem(新)

    概念 对于移动端开发来说,无可避免的就是直面各种设备不同分辨率和不同DPR(设备像素比)的问题,在此忽略其他兼容性问题的探讨. 移动端像素 设备像素(dp),也叫物理像素.指设备能控制显示的最小物理单 ...

  8. 移动端适配--flexible.js

    引言: H5适配一直是一个比较普遍的问题,很多文章都会讲,最近开发了一个H5的项目使用了一下淘宝的 flexible.js,写一篇文章自己总结一下. 一.背景介绍: Flexible.js是淘宝公开的 ...

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

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

  10. 移动端适配之REM

    随着手机等移动设备的普及,移动端带来的流量已经不可忽视,一个网站不只是只有pc的页面就足够了,移动端的适配已经势在必行.但是移动设备种类繁多,屏幕尺寸也千奇百怪,能不能找到一种方式可以适配所有的手机屏 ...

随机推荐

  1. 【vim小记】vim的高效移动

    我还是推荐所有刚入门vim的朋友先去用vimtutor练习,然后去看vim的帮助文档,写的十分仔细,而且可以马上实战,见效很快,以下的很多示意图都是vim帮助文档里的例子,我觉得很好,就拿出来了. v ...

  2. Spring Boot取消默认tomcat启动,打成war包发布到服务器运行

    一.设置打包方式 在pom.xml中设置打包格式 <packaging>war</packaging> 二.取消Spring Boot的tomcat <!--部署成war ...

  3. Word 自带公式使用方法技巧(11)

    1. 快捷命令 在Word中输入「Alt+=」,可以打开Word中自带公式编辑器.这个编辑器似乎没有什么特别,但其实 Word 2010 以后是支持 LaTeX 语法的.常用规则如下: 分号: a/b ...

  4. Django 报错 admin.E408 admin.E409 admin.E410

    报错内容 ERRORS: ?: (admin.E408) 'django.contrib.auth.middleware.AuthenticationMiddleware' must be in MI ...

  5. adb命令查看连接PC的移动设备

    cmd窗口中输入adb应会出现上图情况,如果显示不存在则需要网上下载adb工具并在我的电脑-属性-高级系统设置-环境变量中将adb工具的路径加入PATH,如下图: 输入adb devices 可以看到 ...

  6. Matrix Cells in Distance Order

    Matrix Cells in Distance Order We are given a matrix with R rows and C columns has cells with intege ...

  7. Luogu3214 HNOI2011 卡农 组合、DP

    传送门 火题qwq 我们需要求的是满足元素个数为\(M\).元素取值范围为\([1,2^n-1]\).元素异或和为\(0\)的集合的数量. 首先我们可以计算元素有序的方案数(即计算满足这些条件的序列的 ...

  8. go语言学习 ---struct 对象的序列化和反序列化(xml)

    实例1: //main package main import ( "encoding/xml" "fmt" ) type person struct { Na ...

  9. SharePoint中用Power shell命令修改文档的创建时间

    第一步:pnp组件连接到SharePointConnect-PnpOnline -url 网站地址 第二步:查出文档库及文档库下所有的文件 Get-PnPListItem -List 文档库名称 第三 ...

  10. 【CH1809】匹配统计(KMP)

    题目链接 摘自https://www.cnblogs.com/wyboooo/p/9829517.html 用KMP先求出以a[i]为结尾的前缀与b匹配的最长长度. 比如 f[i] = j,就表示a[ ...