1、平常我们全局设置rem是直接再html标签选择器上面设置的,如:html{fontsize:10px}    那么1rem = 10px

今天我们来动态获取以及设置html标签的rem值  如下

<script>
function setHtmlFontsize(){
// 三个步骤:
// 1.获取html的宽,
let htmlwidth=document.documentElement.clientWidth || document.body.clientWidth;//有些浏览器documentElement获取不到,那就使用后面的body
window.console.log(htmlwidth); // 2.获取html标签
let html=document.getElementsByTagName("html")[0]
window.console.log(html); //3.设置根元素样式 --这里可以根据不同的ui设计搞设置
html.style.fontSize=htmlwidth/75+'px';
}
// 调用一次
setHtmlFontsize();
// 添加监听事件(resize是监听的意思)
window.addEventListener('resize',setHtmlFontsize)
</script>

  

动态设置移动端rem自适应的更多相关文章

  1. 移动端rem自适应设置

    对于移动端自适应各种终端的解决方案较多,本篇只是选择其中一种rem适配,我个人做移动端最喜欢的方案. rem就是以html根元素的字体大小为参考,比如html:font-size:20px;1rem= ...

  2. js动态计算移动端rem适配问题

    第一:css3的media query来实现适配,例如下面这样: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 2 ...

  3. 移动端rem自适应布局(切图)

    本篇适用于初次使用rem为单位切图而无从下手的童鞋.核心是根据屏幕动态改变根元素字体大小,以达到适配各种屏幕.这只是一个拿来就用的教程.很多东西没有详细说明.不过对于快速做手机端切图很有帮助. 模板: ...

  4. js动态计算移动端rem

    在做移动端web app的时候,众所周知,移动设备分辨率五花八门,虽然我们可以通过CSS3的media query来实现适配,例如下面这样: html { font-size : 20px; } @m ...

  5. 移动端rem自适应方案

    一般设计师给我们的设计稿尺寸都为750*1340 .. 网易,淘宝移动端首页上html元素的font-size 目前就先说一下网易的做法 引入下面这段js,用于计算动态的font-size (func ...

  6. JS动态计算移动端rem的解决方案

    首先介绍下rem 说起rem就的说px,em: PX为单位 在Web页面初期制作中,我们都是使用“px”来设置我们的文本,因为他比较稳定和精确.但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的 ...

  7. 移动端rem自适应布局关键代码

    function resi() { var html = document.querySelector("html"); var wW = document.body.client ...

  8. 移动端rem自适应

    window.onload = window.onresize = function (event) { document.documentElement.style.fontSize = 100 * ...

  9. 移动端rem,scale动态设置

    pt:物理像素(电容屏上像素块个数) px:逻辑像素.设备独立像素 高清屏:1px = 4pt 普通屏:1px = 1pt dpr:设备像素比:(某一方向上)物理像素/逻辑像素 通常设置1rem=屏幕 ...

  10. 【转载】rem自适应布局-移动端自适应必备

    原文链接:rem自适应布局-移动端自适应必备 版权所有,转载时请注明出处,违者必究. 由于移动端特殊性,本文讲的是如何使用rem实现自适应,或叫rem响应式布局,通过使用一个脚本就可以rem自适应,不 ...

随机推荐

  1. 乒乓球测距(K210)

    测距 说明 识别的物体是乒乓球(规格应该是统一的吧), 硬件是K210,测距的函数经过拟合,在50cm范围内是准确的 如果使用起来不准确,可以打印代码中的LM, 然后去测数据,自己再拟合一个函数,代替 ...

  2. springboot的jar包转war放入tomcat

    作者:故事我忘了¢个人微信公众号:程序猿的月光宝盒 目录 1. 修改pom文件,打包形式改为war 2.移除内嵌的tomcat模块,但是为了在本机测试方便,我们还需要引入它,所以配置如下 3.修改启动 ...

  3. UFT RegExp

  4. Cursor 网页版来了,这下拉屎时也能工作了

    大家好,我是程序员鱼皮.几天前,Cursor 官方宣布推出了网页版 AI 代理,手机上也能用,可以让 AI 帮忙回答问题.编写代码.好家伙,这下我们程序员真的可以随时随地工作了??? 虽然网上吹得天花 ...

  5. SQL Server 部分数据库问题。 sp_configure 值 'contained database authentication' 必须设置为 1 才能 创建 包含的数据库

    人总是会下意思地逃避去做自己不喜欢的事情,导致这类事情越积越多. 最后,记忆这些不喜欢的事情所产生的负担,远远超出了完成它们所花费的痛苦 sp_configure 值 'contained datab ...

  6. vlookup查找匹配值超过255个字符显示#Value的解决办法

    错误原因 这一个错误的起源于在匹配字符串是否相等时出现#Value错误,如下图黄色标注的部分.在Excel中提示的错误是 公式中所用的某个值是错误的数据类型(a value used in the f ...

  7. Excel中去重并只保留最近n次日期/最大最小值的数据

    ↓↓↓欢迎关注我的公众号,在这里有数据相关技术经验的优质原创文章↓↓↓ 假设一个应用场景如下:当前存在一个产品的记录表,记录着这一个产品对应的日期及状态.同一个产品中存在多条数据,记录产品在不同时间的 ...

  8. java 打印日历

    简介 示例代码 Result Mon Tue Wed Thu Fri Sat Sun 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...

  9. POLIR-Society-Organization-Psychology-Persuasion: The ELM(Elaboration Likelihood Model) of Persuasion Explained

    https://www.verywellmind.com/the-elaboration-likelihood-model-of-persuasion-7724707 Theories > So ...

  10. 如何理解hadoop Zookeeper Phoenix HBase Hive Mapreduce HDFS spark yarn之间的关系

    以前电商平台数据量很小,现在有一份 PB 级的超大数据需要分析统计,比如对用户每日的关键词搜索进行词频统计,能够精琢定位用户需求. 我们以前的方法是使用 oracle 等传统数据库或者写 python ...