CSS—相对单位rem
2023/4/19 11:23:08
本文主要是介绍CSS—相对单位rem,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
一、概述
rem是一个相对长度单位,它的单位长度取决于根标签html的字体尺寸。rem即root em的意思,中文翻译为根em。浏览器的文本尺寸一般默认为16px,即默认情况下:
1rem = 16px
rem布局原理:根据CSS媒体查询功能,更改根标签的字体尺寸,实现rem单位随屏幕尺寸的变化,如下代码所示
@media only screen and (max-width: 1600px) and (min-width: 1280px){ html{ font-size: 14px; } } @media only screen and (max-width: 1280px) and (min-width: 960px){ html{ font-size: 12px; } } @media only screen and (max-width: 960px){ html{ font-size: 10px; } }
注意,一般使用rem方案解决移动端适配问题。IOS6以上和Android2.1以上,基本覆盖所有流行的手机系统。
二、详解
通过设置根标签的字体尺寸,可以改变rem,从而形成一个可控的统一参考系。
rem有两种思路。其一设置rem所代表的尺寸大小与屏幕宽度成正比。其二设置rem所代表的尺寸大小与px容易换算,方便按照设计稿写CSS,此时可以使用媒体查询动态修改根标签的字体尺寸来适配。
第一种思路:设置rem的大小与屏幕宽度成正比
通过JS动态设置根标签的字体尺寸,从而改变rem的尺寸。为了方便计算,一般将rem设置为视图宽度的十分之一。rem可以等比例适配所有分辨率终端(PC端和各种移动端)
// 获取视图宽度 // document.documentElement是指html根节点 // document.body是指body节点 // 因为兼容问题, 有时拿不到根节点的宽度就会拿body来顶替 let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth; console.log(htmlWidth); // 设置html标签的font-size为视图宽度的十分之一 let htmlDom = document.getElementsByTagName('html')[0]; console.log(htmlDom.style.fontSize); htmlDom.style.fontSize = htmlWidth / 10 + 'px'; console.log(htmlDom.style.fontSize);
注意,使用rem+sass可以更好、更方便的适配各种分辨率的移动端。
第二种思路:设置rem尺寸与px容易换算
浏览器的文本尺寸一般默认为16px,设置如下所示。使用媒体查询动态修改根标签的字体尺寸来适配不同分辨率的终端。
html{ font-size: 62.5%; /* 62.5% * 16px = 10px */ }
注意,一般PC浏览器规定字体尺寸最小支持12px,手机端不存在这个问题。
这篇关于CSS—相对单位rem的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-03-06css样式背景图怎么分开(css背景图片样式)-icode9专业技术文章分享
- 2024-03-06css线性样式(css中划线样式)-icode9专业技术文章分享
- 2024-03-06jq点击添加css样式(jq设置css样式)-icode9专业技术文章分享
- 2024-03-06流程样式css(css实现流程图)-icode9专业技术文章分享
- 2024-03-06css怎么调搜索键样式(css搜索框怎么调大小)-icode9专业技术文章分享
- 2024-03-06css层叠样式(Css层叠样式介绍)-icode9专业技术文章分享
- 2024-03-06css样式表有何特点(css样式表的使用方法有几种)-icode9专业技术文章分享
- 2024-03-06css的列表样式(css列表样式属性包括)-icode9专业技术文章分享
- 2024-03-06css3手机端样式(手机端css怎么写)-icode9专业技术文章分享
- 2024-02-21蝉知CSS样式修改(改变css样式)-icode9专业技术文章分享