首页    技术博客    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>

 


推荐阅读
  • input

    UVALive 8201 - BBP 公式计算圆周率

    在1995年，Simon Plouffe 发现了一种特殊的求和方法来表示某些常数。两年后，Bailey 和 Borwein 在他们的论文中发表了这一发现，这种方法被命名为 Bailey-Borwein-Plouffe (BBP) 公式。该问题要求计算圆周率 π 的第 n 个十六进制数字。 ... [详细]
  • list

    深入解析Unity3D游戏开发中的音频播放技术

    深入解析Unity3D游戏开发中的音频播放技术
    在游戏开发中，音频播放是提升玩家沉浸感的关键因素之一。本文将探讨如何在Unity3D中高效地管理和播放不同类型的游戏音频，包括背景音乐和效果音效，并介绍实现这些功能的具体步骤。 ... [详细]
  • list

    深入理解C++中的自定义String类实现

    本文探讨了一种常见的C++面试题目——实现自己的String类。通过此过程，不仅能够检验开发者对C++基础知识的掌握程度，还能加深对其高级特性的理解。文章详细介绍了如何实现基本的功能，如构造函数、析构函数、拷贝构造函数及赋值运算符重载等。 ... [详细]
  • list

    JavaScript 页面卸载事件详解 (onunload)

    JavaScript 页面卸载事件详解 (onunload)
    当用户从页面离开时（如关闭页面或刷新页面），会触发 onunload 事件，此时可以执行预设的脚本。需要注意的是，不同的浏览器对 onunload 事件的支持程度可能有所不同。 ... [详细]
  • list

    在Notepad++中配置Markdown语法高亮及实时预览功能

    在Notepad++中配置Markdown语法高亮及实时预览功能
    本文详细介绍了如何在Notepad++中配置Markdown语法高亮和实时预览功能，包括必要的插件安装和设置步骤。 ... [详细]
  • list

    网络流24题——试题库问题

    网络流24题——试题库问题
    题目描述：假设一个试题库中有n道试题。每道试题都标明了所属类别。同一道题可能有多个类别属性。现要从题库中抽取m道题组成试卷。并要求试卷包含指定类型的试题。试设计一个满足要求的组卷算 ... [详细]
  • list

    为何Compose与Swarm之后仍有Kubernetes的诞生？

    为何Compose与Swarm之后仍有Kubernetes的诞生？
    探讨在已有Compose和Swarm的情况下，Kubernetes是如何以其独特的设计理念和技术优势脱颖而出，成为容器编排领域的领航者。 ... [详细]
  • request

    SIP基础概览

    本文介绍了SIP（Session Initiation Protocol，会话发起协议）的基本概念、功能、消息格式及其实现机制。SIP是一种在IP网络上用于建立、管理和终止多媒体通信会话的应用层协议。 ... [详细]
  • request

    CentOS 服务器自定义密码策略

    随着Linux操作系统的广泛使用，确保用户账户及系统安全变得尤为重要。用户密码的复杂性直接关系到系统的整体安全性。本文将详细介绍如何在CentOS服务器上自定义密码规则，以增强系统的安全性。 ... [详细]
  • request

    AngularJS中ng-repeat元素的单选功能实现

    本文介绍了如何在AngularJS应用中使用ng-repeat指令创建可单独点击选中的列表项，并详细描述了实现这一功能的具体步骤和代码示例。 ... [详细]
  • request

    冲刺最后一天的任务完成情况

    在项目冲刺的最后一天，团队专注于软件用户界面的细节优化，包括调整控件布局和字体设置，以确保界面的简洁性和用户友好性。 ... [详细]
  • request

    如何将 Git 提交编辑器从 Nano 更改为 Vim

    默认情况下，Git 使用 Nano 编辑器进行提交信息的编辑，但如果您更喜欢使用 Vim，可以通过简单的配置更改来实现这一变化。本文将指导您如何通过修改全局配置文件来设置 Vim 作为默认的 Git 提交编辑器。 ... [详细]
  • request

    探索Java 11中的ZGC垃圾收集器

    探索Java 11中的ZGC垃圾收集器
    Java 11引入了一种新的垃圾收集器——ZGC，由Oracle公司研发，旨在支持TB级别的内存容量，并保证极低的暂停时间。本文将探讨ZGC的开发背景、技术特点及其潜在的应用前景。 ... [详细]
  • sum

    HDU 6116 路径计数优化

    本文探讨了使用普通生成函数和指数生成函数解决组合与排列问题的方法，特别是在处理特定路径计数问题时的应用。文章通过详细分析和代码实现，展示了如何高效地计算在给定条件下不相邻相同元素的排列数量。 ... [详细]
  • python

    使用 Python3 和 sqlacodegen 从现有数据库生成 ORM Model 文件

    本文介绍了如何通过安装 sqlacodegen 和 pymysql 来根据现有的 MySQL 数据库自动生成 ORM 的模型文件（model.py）。此方法适用于需要快速搭建项目模型层的情况。 ... [详细]
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社区 版权所有