rem自适应原理--如何自己利用stylus写rem自适应移动端

qq_42750608

已于 2023-10-12 01:16:32 修改

阅读量1.7k

点赞数

分类专栏： rem移动端适配 JavaScript面试问题 css 文章标签： rem stylus px转化为rem

于 2019-06-04 18:34:38 首次发布

本文链接：https://blog.csdn.net/qq_42750608/article/details/90796198

版权

JavaScript面试问题同时被 3 个专栏收录

59 篇文章 0 订阅

订阅专栏

css

12 篇文章 0 订阅

订阅专栏

rem移动端适配

5 篇文章 0 订阅

订阅专栏

一. 当设置默认html的font-size为37.5px时

1. 动态设置html的font-size的值

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>rem</title>
    <link rel="stylesheet" href="./src/assets/css/base.css">
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
  <script>
    //获取屏幕宽度(viewport)
		let htmlWidth = document.documentElement.clientWidth ||
			document.body.clientWidth;
		console.log(htmlWidth);
		//获取htmlDom
		let htmlDom = document.getElementsByTagName('html')[0];
		//设置html的font-size
		htmlDom.style.fontSize = htmlWidth/10+'px';
		
		window.addEventListener('resize',(e)=>{
			let htmlWidth = document.documentElement.clientWidth ||
			document.body.clientWidth;
			console.log(htmlWidth);
			//获取htmlDom
			let htmlDom = document.getElementsByTagName('html')[0];
			//设置html的font-size
			htmlDom.style.fontSize = htmlWidth/10+'px';
		})
  </script>
</html>

2. 核心函数:

pxToRem(designpx)
  $rem = 37.5px;
  return (designpx / $rem)rem

3. 推导流程:

已知默认宽度为375px, 因为1rem == html的font-size的值, 之所以把html的字体大小赋值成当前屏幕款的1/10, 只是因为好算, 倒推得到:

1) 当移动端屏幕宽度为375px时, 1rem == 37.5px, 15px转化成rem: 15 / 37.5 == 0.4rem;

2) 同理如果是750px的屏幕: 1rem == 75px, 期望的是0.4rem的字体大小要显示为30px的效果;

按照上述计算方式: 30 / 75 == 0.4rem, rem再转换为px的值0.4 * 75 == 30px, 符合30px的期望，符合屏幕越大显示内容字体越大的需求。

3) 以此类推1rem == (当前屏幕宽度 / 10) + px单位; px转换为rem: rem的值 == 1倍ui设计图的px数值 / 37.5;

4. 浏览器验证方法:

屏幕宽度为1500px时:

屏幕宽度为375px时:

注意事项: 当然不一定要使用37.5px为375px屏幕宽度下的html的font-size的值, 也可以使用其他的数字, 比如设置该屏幕宽度下html的font-size大小为16px

二. 当默认html的font-size设置为16px时:

1. 动态设置html的font-size的css属性值

const unitNum = 375 / 16
 //获取屏幕宽度(viewport)
		let htmlWidth = document.documentElement.clientWidth ||
			document.body.clientWidth;
		console.log(htmlWidth);
		//获取htmlDom
		let htmlDom = document.getElementsByTagName('html')[0];
		//设置html的font-size
		htmlDom.style.fontSize = htmlWidth/unitNum +'px';
		
		window.addEventListener('resize',(e)=>{
			let htmlWidth = document.documentElement.clientWidth ||
			document.body.clientWidth;
			console.log(htmlWidth);
			//获取htmlDom
			let htmlDom = document.getElementsByTagName('html')[0];
			//设置html的font-size
			htmlDom.style.fontSize = htmlWidth/unitNum +'px';
		})

2. pxToRem函数改为:

pxToRem(designpx )
  $rem = 16px;
  return (designpx / $rem)rem

3. 验证方法:

rem效果快捷推导参照物: calc(100vw / (375 / 16));

const defaultScreenWidth = 375;

const unitNum = (375 / 16);

const defaultHtmlFontSize = 16px;

const newScreenWidth = document.documentElement.clientWidth ||
document.body.clientWidth;(当前最新的屏幕宽度)

1) 1rem == newScreenWidth / unitNum;

2) 所以在375px的屏幕宽度下: 16px == 1rem == calc(100vw / (375 / 16));

3) 所以在750px的屏幕宽度下期望按钮字体大小为:

当前屏幕宽度(750) * defaultHtmlFontSize / defaultScreenWidth;

即32px == 1rem == calc(100vw / unitNum);

4) 1500px屏幕宽度下:

因为公式: 当前屏幕宽度 * defaultHtmlFontSize / defaultScreenWidth;

得到期望的按钮字体大小: 64px == 1rem == calc(100vw / unitNum);

注意: calc(100vw / unitNum); 拆开就是calc(100vw * 16 / 375); 这样在浏览器好写一些, 更加好验证

使用方法:

属性名: pxToRem(数值+px单位)

qq_42750608

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
rem自适应原理--如何自己利用stylus写rem自适应移动端

rem自适应原理--如何自己利用stylus写rem自适应移动端
复制链接

扫一扫

专栏目录

rem自适应原理--如何自己利用stylus写rem自适应移动端

一. 当设置默认html的font-size为37.5px时

1. 动态设置html的font-size的值

2. 核心函数:

3. 推导流程:

4. 浏览器验证方法:

二. 当默认html的font-size设置为16px时:

1. 动态设置html的font-size的css属性值

2. pxToRem函数改为:

3. 验证方法:

rem效果快捷推导参照物: calc(100vw / (375 / 16));

使用方法:

“相关推荐”对你有帮助么？