首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

移动端常用单位——rem的使用方法和注意事项

作者：智亚康-Scorpio | 来源：互联网 | 2023-12-12 07:20
本文介绍了移动端常用的单位rem的使用方法和注意事项，包括px、%、em、vw、vh等其他常用单位的比较。同时还介绍了如何通过JS获取视口宽度并动态调整rem的值，以适应不同设备的屏幕大小。此外，还提到了rem目前在移动端的主流地位。

移动端常用单位：
①px：像素大小，固定值
②%：百分比
③em（不常用，但是在首行缩进时可以使用）：相对自身的font大小（当自身的字体大小也是em做单位时，才会以父元素的字体大小为基准单位）
④rem（移动端主流）：相对根节点(html)的font大小
⑤vw（视口宽度）：相对视口宽度比例，1vw相当于视口宽度的百分之一
⑥vh（视口高度）：相对视口高度比例，1vh相当于视口高度的百分之一
视口宽度（clientWidth）用JS获取,修改html{ font-size : ?rem } 从而动态调整flex布局宽高：docEl.style.fOntsize= viewWidth/375*20+‘px‘;
移动端rem目前还是主流

 

 

技术分享图片

 

 

 

DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=">
<title>3.9 移动端常用单位title>
<link rel="stylesheet" href="css/iconfont.css">
<style>
/*px/%/em/rem/vw/vh*/
/*css reset*/
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
background-color: #e2e2e2;
color: #595B66;
}
a {
font-size: 12px;
color: #686868;
text-decoration: none;
}
li {
list-style: none;
}
/*body {
font-size: 20px;
}*/
html {
font-size: 12px;
}
.tabbar-container {
position: fixed;
left: 0;
bottom: 0;
z-index: 1000;
width: 100%;

/*height: 5em;
font-size: 12px;*/
/*font-size: 12em;*/
/*height: 5rem;*/
/*width: 100vw;
height: 10vh;*/
background-color: #fff;
box-shadow: 0 0 10px 0 rgba(154, 141 ,141, 0.6);
height: 50px;
/*
height
375px -> 100%(375px) x 50px
750px -> 100%(750px) x 100px
?(视口宽度) -> (? / 750) * 100 px
?(视口宽度) = document.documentElement.clientWidth
height = (document.documentElement.clientWidth / 750) * 100 px
height = (document.documentElement.clientWidth / 375) * 50 px
*/
/*
用px/em做单位，每次都要用js一一修改
能不能统一修改呢？
375px -> 1rem = 20px;
height = 50 / 20 = 2.5rem;
750px -> 1rem = 40px;
height = 100 / 40 = 2.5rem;
?(视口宽度) -> 1rem = (? / 375) * 20 px
?(视口宽度) = document.documentElement.clientWidth
1rem = (document.documentElement.clientWidth / 375) * 20 px
1rem = (document.documentElement.clientWidth / 750) * 40 px
height = 2.5rem;
*/
/*375px 1rem = 20px;*/
height: 2.5rem;
}
.tabbar-link .iconfont {
/*font-size: 24px;*/
font-size: 1.2rem;
/*font-size: 2em;*/
/*
font-size
375px -> 24px
750px -> 48px
?(视口宽度) -> (? / 750) * 48 px
?(视口宽度) = document.documentElement.clientWidth
font-size = (document.documentElement.clientWidth / 750) * 48 px
font-size = (document.documentElement.clientWidth / 375) * 24 px
*/
/*
用px/em做单位，每次都要用js一一修改
能不能统一修改呢？
375px -> 1rem = 20px;
font-size = 24 / 20 = 1.2rem;
750px -> 1rem = 40px;
font-size = 48 / 40 = 1.2rem;
?(视口宽度) -> 1rem = (? / 375) * 20 px
?(视口宽度) = document.documentElement.clientWidth
1rem = (document.documentElement.clientWidth / 375) * 20 px
1rem = (document.documentElement.clientWidth / 750) * 40 px
font-size = 1.2rem;
*/
}
.tabbar,
.tabbar-item,
.tabbar-link {
height: 100%;
}
.tabbar {
display: flex;
}
.tabbar-item {
flex: 1;
}
.tabbar-link {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 0.6rem;
}
.tabbar-item-active .tabbar-link {
color: #de181b;
}
style>
head>
<body>

<div class="tabbar-container">
<ul class="tabbar">
<li class="tabbar-item tabbar-item-active">
<a href="###" class="tabbar-link">
<i class="iconfont icon-home">i>
<span>首页span>
a>
li>
<li class="tabbar-item">
<a href="###" class="tabbar-link">
<i class="iconfont icon-category">i>
<span>分类页span>
a>
li>
<li class="tabbar-item">
<a href="###" class="tabbar-link">
<i class="iconfont icon-cart">i>
<span>购物车span>
a>
li>
<li class="tabbar-item">
<a href="###" class="tabbar-link">
<i class="iconfont icon-personal">i>
<span>个人中心span>
a>
li>
ul>
div>
<script>
setRemUnit();
window.onresize = setRemUnit;
function setRemUnit() {
var docEl = document.documentElement;
var viewWidth = docEl.clientWidth;
docEl.style.fontSize = viewWidth / 375 * 20 + ‘px‘;
// docEl.style.fOntSize= viewWidth / 750 * 40 + ‘px‘;
// 1rem = 20px
}
script>
body>
html>


DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=">
<title>3.9 移动端常用单位title>
<link rel="stylesheet" href="css/iconfont.css">
<style>
/*px/%/em/rem/vw/vh*/
/*css reset*/
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
background-color: #e2e2e2;
color: #595B66;
}
a {
font-size: 12px;
color: #686868;
text-decoration: none;
}
li {
list-style: none;
}
/*body {
font-size: 20px;
}*/
html {
font-size: 12px;
}
.tabbar-container {
position: fixed;
left: 0;
bottom: 0;
z-index: 1000;
width: 100%;

/*height: 5em;
font-size: 12px;*/
/*font-size: 12em;*/
/*height: 5rem;*/
/*width: 100vw;
height: 10vh;*/
background-color: #fff;
box-shadow: 0 0 10px 0 rgba(154, 141 ,141, 0.6);
height: 50px;
/*
height
375px -> 100%(375px) x 50px
750px -> 100%(750px) x 100px
?(视口宽度) -> (? / 750) * 100 px
?(视口宽度) = document.documentElement.clientWidth
height = (document.documentElement.clientWidth / 750) * 100 px
height = (document.documentElement.clientWidth / 375) * 50 px
*/
/*
用px/em做单位，每次都要用js一一修改
能不能统一修改呢？
375px -> 1rem = 20px;
height = 50 / 20 = 2.5rem;
750px -> 1rem = 40px;
height = 100 / 40 = 2.5rem;
?(视口宽度) -> 1rem = (? / 375) * 20 px
?(视口宽度) = document.documentElement.clientWidth
1rem = (document.documentElement.clientWidth / 375) * 20 px
1rem = (document.documentElement.clientWidth / 750) * 40 px
height = 2.5rem;
*/
/*375px 1rem = 20px;*/
height: 2.5rem;
}
.tabbar-link .iconfont {
/*font-size: 24px;*/
font-size: 1.2rem;
/*font-size: 2em;*/
/*
font-size
375px -> 24px
750px -> 48px
?(视口宽度) -> (? / 750) * 48 px
?(视口宽度) = document.documentElement.clientWidth
font-size = (document.documentElement.clientWidth / 750) * 48 px
font-size = (document.documentElement.clientWidth / 375) * 24 px
*/
/*
用px/em做单位，每次都要用js一一修改
能不能统一修改呢？
375px -> 1rem = 20px;
font-size = 24 / 20 = 1.2rem;
750px -> 1rem = 40px;
font-size = 48 / 40 = 1.2rem;
?(视口宽度) -> 1rem = (? / 375) * 20 px
?(视口宽度) = document.documentElement.clientWidth
1rem = (document.documentElement.clientWidth / 375) * 20 px
1rem = (document.documentElement.clientWidth / 750) * 40 px
font-size = 1.2rem;
*/
}
.tabbar,
.tabbar-item,
.tabbar-link {
height: 100%;
}
.tabbar {
display: flex;
}
.tabbar-item {
flex: 1;
}
.tabbar-link {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 0.6rem;
}
.tabbar-item-active .tabbar-link {
color: #de181b;
}
style>
head>
<body>

<div class="tabbar-container">
<ul class="tabbar">
<li class="tabbar-item tabbar-item-active">
<a href="###" class="tabbar-link">
<i class="iconfont icon-home">i>
<span>首页span>
a>
li>
<li class="tabbar-item">
<a href="###" class="tabbar-link">
<i class="iconfont icon-category">i>
<span>分类页span>
a>
li>
<li class="tabbar-item">
<a href="###" class="tabbar-link">
<i class="iconfont icon-cart">i>
<span>购物车span>
a>
li>
<li class="tabbar-item">
<a href="###" class="tabbar-link">
<i class="iconfont icon-personal">i>
<span>个人中心span>
a>
li>
ul>
div>
<script>
setRemUnit();
window.onresize = setRemUnit;
function setRemUnit() {
var docEl = document.documentElement;
var viewWidth = docEl.clientWidth;
docEl.style.fontSize = viewWidth / 375 * 20 + ‘px‘;
// docEl.style.fOntSize= viewWidth / 750 * 40 + ‘px‘;
// 1rem = 20px
}
script>
body>
html>

 


推荐阅读
  • nodejs

    Node.js 进程异常时自动发送邮件通知

    在项目部署后，Node.js 进程可能会遇到不可预见的错误并崩溃。为了及时通知开发人员进行问题排查，我们可以利用 nodemailer 插件来发送邮件提醒。本文将详细介绍如何配置和使用 nodemailer 实现这一功能。 ... [详细]
  • list

    实现鼠标坐标转换的 Tooltip 弹出层

    本文介绍如何通过 JavaScript 实现一个基于鼠标坐标的 Tooltip 弹出层，详细解释了如何获取窗口和文档的尺寸及滚动位置，并优化了代码结构。 ... [详细]
  • js

    通过Web界面管理Linux日志的解决方案

    通过Web界面管理Linux日志的解决方案
    本指南介绍了一种利用rsyslog、MariaDB和LogAnalyzer搭建集中式日志管理平台的方法，使用户可以通过Web界面查看和分析Linux系统的日志记录。此方案不仅适用于服务器环境，还提供了详细的步骤来确保系统的稳定性和安全性。 ... [详细]
  • char

    深入解析 Django ORM：Model 和 Field 类型

    本文详细探讨了 Django 的 ORM（对象关系映射）机制，重点介绍了其如何通过 Python 元类技术实现数据库表与 Python 类的映射。此外，文章还分析了 Django 中各种字段类型的继承结构及其与数据库数据类型的对应关系。 ... [详细]
  • char

    基于jQuery的用户注册页面表单验证代码分享

    本文介绍了一段使用jQuery实现的用户注册页面表单验证代码，适用于前端开发人员学习和参考。该示例结合了HTML、CSS和JavaScript，确保用户输入的数据格式正确。 ... [详细]
  • list

    使用RPM包在本地安装MySQL 5.6

    本文详细介绍了如何通过RPM包在Linux系统（如CentOS）上安装MySQL 5.6。涵盖了检查现有安装、下载和安装RPM包、配置MySQL以及设置远程访问和开机自启动等步骤。 ... [详细]
  • list

    深入理解JavaScript的作用域链与闭包

    本文详细探讨了JavaScript中的作用域链和闭包机制，解释了它们的工作原理及其在实际编程中的应用。通过具体的代码示例，帮助读者更好地理解和掌握这些概念。 ... [详细]
  • int

    自己用过的一些比较有用的css3新属性【HTML】

    自己用过的一些比较有用的css3新属性【HTML】
    web前端|html教程自己用过的一些比较用的css3新属性web前端-html教程css3刚推出不久，虽然大多数的css3属性在很多流行的浏览器中不支持，但我个人觉得还是要尽量开 ... [详细]
  • char

    实现两个线程交替打印数字和字母的同步机制

    本文介绍了如何使用Java中的同步方法和同步代码块来实现两个线程的交替打印。一个线程负责打印1到52的数字，另一个线程负责打印A到Z的字母，确保输出顺序为12A34B...5152Z。 ... [详细]
  • list

    深入理解网易NEC CSS框架：规范、应用与学习心得

    本文将介绍网易NEC CSS框架的规范及其在实际项目中的应用。通过详细解析其分类和命名规则，探讨如何编写高效、可维护的CSS代码，并分享一些实用的学习心得。 ... [详细]
  • char

    QT预备式（包含MySql配置）未完成……

    20100423：Fixes:更新批处理，以兼容WIN7。第一次系统地玩QT，于是诞生了此预备式：【QT版本4.6.0&#x ... [详细]
  • js

    深入理解HTML基础语法

    本文详细介绍超文本标记语言（HTML）的基本概念与语法结构。HTML是构建网页的核心语言，通过标记标签描述页面内容，帮助开发者创建结构化、语义化的Web页面。 ... [详细]
  • char

    构建个人博客站点：基于LAMP环境的WordPress部署指南

    本文详细介绍如何利用已搭建的LAMP（Linux、Apache、MySQL、PHP）环境，快速创建一个基于WordPress的内容管理系统（CMS）。WordPress是一款流行的开源博客平台，适用于个人或小型团队使用。 ... [详细]
  • char

    JavaScript 中跟随鼠标的多个 div 动画：for 循环方向对效果的影响

    探讨在 JavaScript 中使用不同方向的 for 循环来实现跟随鼠标的 div 动画时，为什么会出现不同的视觉效果。 ... [详细]
  • js

    利用Selenium与ChromeDriver实现豆瓣网页全屏截图

    利用Selenium与ChromeDriver实现豆瓣网页全屏截图
    本文介绍了一种使用Selenium和ChromeDriver结合Python代码，轻松实现对豆瓣网站进行完整页面截图的方法。该方法不仅简单易行，而且解决了新版Selenium不再支持PhantomJS的问题。 ... [详细]
author-avatar
智亚康-Scorpio
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有