多种方法解决rem字体适配

rem单位

·rem(root em)相对单位类似于em，em相对于是父元素的字体大小

·rem的基准是相对于html的字体大小(root根，document的根元素是html)

·rem的优点：通过修改html的文字大小来改变页面整体元素的大小，达到适配效果

实现方法一：媒体查询

·计算方法

html字体计算方法：html{font-size:(屏幕的尺寸/划分的份数)；}

eg:html{font-size:(750px/15);}//15是将屏幕划分为15等份

页面元素rem计算方法：页面的元素的px值/font-size;

eg:.box{width:(100/50rem);}//将100px装换成rem为2rem

注释：以上计算公式均在lees预处理器中完成不可直接在css文件中计算，可借助计算器完成计算，或用插件完成px转换rem。

媒体查询的缺点：css样式繁琐，不可适配所有的屏幕。

<style>#将屏幕尺寸划分为15分为例，
//利用媒体查询设置不同屏幕分辨率下的html文字大小
//以下为常见的屏幕尺寸//320尺寸时@media screen and(min-width:320px){html{font-size: (320px/15);}}// 360px时@media screen and (min-width:360px){html{font-size: (360px/15);}}// 375px时@media screen and (min-width:375px){html{font-size: (375px/15);}}// 384px时@media screen and (min-width:384px){html{font-size: (384px/15);}}// 400px时@media screen and (min-width:400px){html{font-size: (400px/15);}}// 500px时@media screen and (min-width:500px){html{font-size: (500px/15);}}// 640px时@media screen and (min-width:640px){html{font-size: (640px/15);}}// 720px时@media screen and (min-width:720px){html{font-size: (720px/15);}}// 750px时@media screen and (min-width:750px){html{font-size: (750px/15);}}
</style>

实现方法二：JavaScript实现rem适配

思想与媒体查询一致通过改变html字体大小的方法实现。

function setFontSize(){let screenWidth=document.documentElement.clientWidth;//获取设备(屏幕)的宽度let fontSizeA=((screenWidth/750)*50>50?50:(screenWidth/750)*50);/*#750是稿件的宽度#第一个50是当前在稿件中1rem对应的px (此处1rem=50px)#第二个50是限制最大的字体，屏幕尺寸超过750时将字体固定为50px#750和50非固定值,可改变*/document.querySelector("html").style.fontSize=fontSizeA+"px";
}//在页面加载的时候调用函数setFontSize
window.onload=function(){setFontSize();}
//监听屏幕尺寸，屏幕尺寸发生改变调用函数setFontSize
window.addEventListener("resize",setFontSize);

此时页面元素的rem值：页面元素的px值/50;

多种方法解决rem字体适配相关推荐

【CTF】Misc4——多种方法解决+闪的好快+come_game+白哥的鸽子+linux
多种方法解决解压完得到一个exe文件,却显示无法打开,将其转换成txt格式,打开看到是一串代码: 仔细观察发现是base64编码的图片,将其转码得到了一张二维码,扫码得到FLAG- -------- ...
bugku 二维码题目多种方法解决、闪的好快、乌云邀请码
多种方法解决下载压缩包解压后是个exe文件,无法打开.放入winhex下分析,右边是一串类似base64编码的字符串. 题目提示会得到一个二维码图片,百度了下图片和base64可以转化.用在线工具转 ...
【bugku CTF】MISC杂项：很普通的数独（isccctf)、啊哒、隐写、隐写2、多种方法解决、easy_crypto 、聪明的小羊、ping
目录 1.很普通的数独 2.啊哒 3.隐写 4.隐写2 5.多种方法解决 6.easy_crypto 7.聪明的小羊 8.ping 1.很普通的数独这里下载下来的是一个zip文件,解压缩,里面 ...
BugkuCTF_MISC——“多种方法解决”、“闪的好快”
文章目录使用工具一.多种方法解决二.闪的好快完使用工具 notepad++ Stegsolve 一.多种方法解决题目是一个exe文件,双击打不开使用notepad++查看源码这是一张b ...
多种方法解决多个div并排显示的问题
平时做项目中总是能碰到让多个div显示在一排的问题例如: 将上图显示为: 其实有很多种方法都可解决此问题在这里做一下总结一.使用 display 也就是说块元素占用了全部宽度,前后会带有换行符, ...
多种方法解决计算机程序中出现.DLL文件丢失的问题
title: DLL-lose date: 2019-11-21 15:55:47 description: 解决计算机程序中出现.DLL文件丢失的问题在安装某些软件,我们正准备开开心心地打开, ...
全网多种方法解决未连接到互联网代理服务器出现问题，或者地址有误的错误
文章目录 1. 复现错误 2. 分析错误 3. 解决错误 4. 解决该错误的其他方法 5. 补充说明 1. 复现错误今天,单位的实习生准备下载公司的代码,由于公司的代码放在gitlab上,需要内网才 ...
解决Rem的适配问题
rem的适配知道几个基本的概念 11rem的值永远等于根元素(html)的font-size属性值的大小 2浏览器默认的font-size值的大小是16px 3下文中rem.js的作用 = flex ...
多种方法解决Error querying database. Cause: java.sql.SQLException: No value specified for parameter 1
文章目录 1. 复现问题 2. 分析问题 3. 解决问题 4. 出现该错误的其他可能 1. 复现问题今天在调试接口时,突然报出如下错误: org.springframework.jdbc.BadSq ...

多种方法解决rem字体适配

多种方法解决rem字体适配相关推荐

最新文章

热门文章