动态设置移动端rem自适应
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自适应的更多相关文章
- 移动端rem自适应设置
对于移动端自适应各种终端的解决方案较多,本篇只是选择其中一种rem适配,我个人做移动端最喜欢的方案. rem就是以html根元素的字体大小为参考,比如html:font-size:20px;1rem= ...
- 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 ...
- 移动端rem自适应布局(切图)
本篇适用于初次使用rem为单位切图而无从下手的童鞋.核心是根据屏幕动态改变根元素字体大小,以达到适配各种屏幕.这只是一个拿来就用的教程.很多东西没有详细说明.不过对于快速做手机端切图很有帮助. 模板: ...
- js动态计算移动端rem
在做移动端web app的时候,众所周知,移动设备分辨率五花八门,虽然我们可以通过CSS3的media query来实现适配,例如下面这样: html { font-size : 20px; } @m ...
- 移动端rem自适应方案
一般设计师给我们的设计稿尺寸都为750*1340 .. 网易,淘宝移动端首页上html元素的font-size 目前就先说一下网易的做法 引入下面这段js,用于计算动态的font-size (func ...
- JS动态计算移动端rem的解决方案
首先介绍下rem 说起rem就的说px,em: PX为单位 在Web页面初期制作中,我们都是使用“px”来设置我们的文本,因为他比较稳定和精确.但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的 ...
- 移动端rem自适应布局关键代码
function resi() { var html = document.querySelector("html"); var wW = document.body.client ...
- 移动端rem自适应
window.onload = window.onresize = function (event) { document.documentElement.style.fontSize = 100 * ...
- 移动端rem,scale动态设置
pt:物理像素(电容屏上像素块个数) px:逻辑像素.设备独立像素 高清屏:1px = 4pt 普通屏:1px = 1pt dpr:设备像素比:(某一方向上)物理像素/逻辑像素 通常设置1rem=屏幕 ...
- 【转载】rem自适应布局-移动端自适应必备
原文链接:rem自适应布局-移动端自适应必备 版权所有,转载时请注明出处,违者必究. 由于移动端特殊性,本文讲的是如何使用rem实现自适应,或叫rem响应式布局,通过使用一个脚本就可以rem自适应,不 ...
随机推荐
- 乒乓球测距(K210)
测距 说明 识别的物体是乒乓球(规格应该是统一的吧), 硬件是K210,测距的函数经过拟合,在50cm范围内是准确的 如果使用起来不准确,可以打印代码中的LM, 然后去测数据,自己再拟合一个函数,代替 ...
- springboot的jar包转war放入tomcat
作者:故事我忘了¢个人微信公众号:程序猿的月光宝盒 目录 1. 修改pom文件,打包形式改为war 2.移除内嵌的tomcat模块,但是为了在本机测试方便,我们还需要引入它,所以配置如下 3.修改启动 ...
- UFT RegExp
- Cursor 网页版来了,这下拉屎时也能工作了
大家好,我是程序员鱼皮.几天前,Cursor 官方宣布推出了网页版 AI 代理,手机上也能用,可以让 AI 帮忙回答问题.编写代码.好家伙,这下我们程序员真的可以随时随地工作了??? 虽然网上吹得天花 ...
- SQL Server 部分数据库问题。 sp_configure 值 'contained database authentication' 必须设置为 1 才能 创建 包含的数据库
人总是会下意思地逃避去做自己不喜欢的事情,导致这类事情越积越多. 最后,记忆这些不喜欢的事情所产生的负担,远远超出了完成它们所花费的痛苦 sp_configure 值 'contained datab ...
- vlookup查找匹配值超过255个字符显示#Value的解决办法
错误原因 这一个错误的起源于在匹配字符串是否相等时出现#Value错误,如下图黄色标注的部分.在Excel中提示的错误是 公式中所用的某个值是错误的数据类型(a value used in the f ...
- Excel中去重并只保留最近n次日期/最大最小值的数据
↓↓↓欢迎关注我的公众号,在这里有数据相关技术经验的优质原创文章↓↓↓ 假设一个应用场景如下:当前存在一个产品的记录表,记录着这一个产品对应的日期及状态.同一个产品中存在多条数据,记录产品在不同时间的 ...
- 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 ...
- 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 ...
- 如何理解hadoop Zookeeper Phoenix HBase Hive Mapreduce HDFS spark yarn之间的关系
以前电商平台数据量很小,现在有一份 PB 级的超大数据需要分析统计,比如对用户每日的关键词搜索进行词频统计,能够精琢定位用户需求. 我们以前的方法是使用 oracle 等传统数据库或者写 python ...