移动端常用单位——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="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<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> <!-- <p style="text-indent: 2em;">
我是短路
我是短路
我是短路
我是短路
我是短路
我是短路
我是短路
我是短路
我是短路
adasdasdasdasd
adasdasdasdasd
adasdasdasdasd
adasdasdasdasd
adasdasdasdasd
adasdasdasdasd
adasdasdasdasd
adasdasdasdasd
adasdasdasdasd
adasdasdasdasd
adasdasdasdasd
adasdasdasdasd
adasdasdasdasd
adasdasdasdasd
adasdasdasdasd
adasdasdasdasd
adasdasdasdasd
adasdasdasdasd
adasdasdasdasd
adasdasdasdasd
adasdasdasdasd
adasdasdasdasd
</p> --> <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="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<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> <!-- <p style="text-indent: 2em;">
我是短路
我是短路
我是短路
我是短路
我是短路
我是短路
我是短路
我是短路
我是短路
adasdasdasdasd
adasdasdasdasd
adasdasdasdasd
adasdasdasdasd
adasdasdasdasd
adasdasdasdasd
adasdasdasdasd
adasdasdasdasd
adasdasdasdasd
adasdasdasdasd
adasdasdasdasd
adasdasdasdasd
adasdasdasdasd
adasdasdasdasd
adasdasdasdasd
adasdasdasdasd
adasdasdasdasd
adasdasdasdasd
adasdasdasdasd
adasdasdasdasd
adasdasdasdasd
adasdasdasdasd
</p> --> <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>
移动端常用单位——rem的更多相关文章
- 移动端适配单位rem
0 写在前面 本周惊喜地发现,其他各个老师的软工班(罗杰老师班和欧阳老师班)的软工项目的alpha版本都已经发布了!(然而我们软工项目还没开始写代码…逃…) 十分好奇的我第一时间下载了一些他们的产品进 ...
- 简单介绍移动端CSS3单位rem的用法
PC端大部份是用px单位,小部分用em单位,而移动端,请全部用rem单位吧.目前大部份设备,包括但不限于iOS 5+.Android 2.3+.Window Phone 8+都是可以兼容的,具体兼容表 ...
- CSS之常见布局|常用单位|水平垂直居中
常见布局: 1. 流式布局:百分比布局,宽高.margin.pinding都是百分比 2. 固定布局:盒子的宽高固定,如:margin.padding等 3. 浮动布局:float 4. 弹性布局:f ...
- css常用单位
css常用单位 本文来简单介绍下css的常用单位. 绝对长度单位 绝对长度单位代表一个物理测量. 像素px(pixels) 在web上,像素px是典型的度量单位,很多其他长度单位直接映射成像素.最终, ...
- 细说移动端 经典的REM布局 与 新秀VW布局
和以往一样,本次项目也放到了 Github 中,欢迎围观 star ~ 1. 前言 2. 基本概念 3. REM布局 4. VW布局 实现单边边框1px 实现多边边框1px 实现边框圆角 实现容器固定 ...
- 移动端适配之REM
随着手机等移动设备的普及,移动端带来的流量已经不可忽视,一个网站不只是只有pc的页面就足够了,移动端的适配已经势在必行.但是移动设备种类繁多,屏幕尺寸也千奇百怪,能不能找到一种方式可以适配所有的手机屏 ...
- 移动端适配（rem & viewport）--移动端开发整理笔记（四）
移动端适配 通过rem适配 em: 根据元素自身的字体大小来计算自己的尺寸 rem: (root em) 根据根节点(html)的字体大小来计算自己的尺寸 我们知道,在不同的手机设备,分辨率大小是 ...
- CSS的常用单位 %和 vw vh 和 box-sizing：border-box; 和flex简介
一.% 理解: %号是CSS中的常用单位,它是相对于父容器而言的.如:一个父容器的宽是100px,给它的子元素一个10%,那么子元素的宽就是100px的10% 10px. 效果图: (利用%设置了li ...
- H5移动端适配方案-rem
为什么移动端要适配: 由于移动设备的尺寸不一,所以移动端的页面要能够适应不同尺寸的设备,即页面的自适应,让页面在视觉上保持一致. rem:rem 是css3的一种相对单位,参考是根元素HMTL的fon ...
随机推荐
- Laravel使用artisan快速实现表单的登陆注册
1. 开发环境 macOS Mojave 10.14.6 XAMPP 5.6.38 Laravel 5.2 2. 在终端,先进入到项目根目录并执行执行命令 php artisan make:auth ...
- informix 数据库锁表分析和解决方法
一.前言 在联机事务处理(OLTP)的数据库应用系统中,多用户.多任务的并发性是系统最重要的技术指标之一.为了提高并发性,目前大部分RDBMS都采用加锁技术.然而由于现实环境的复杂性,使用加锁技术又不 ...
- C++模板封装Win32 API 动态调用
起因 花两周通读了一遍<C++ Primer>,积攒的疑惑一扫而光. 前因 利用C++11可变模板,封装调用dll导出函数 本以为已经很好用了,最近抽时间巩固下知识体系,发现自己道行不够! ...
- GlassFish 任意文件读取漏洞
poc https://192.168.49.2:4848/theme/META-INF/%c0%ae%c0%ae/%c0%ae%c0%ae/%c0%ae%c0%ae/%c0%ae%c0%ae/%c0 ...
- 图文实例解析，InnoDB 存储引擎中行锁的三种算法
前文提到,对于 InnoDB 来说,随时都可以加锁(关于加锁的 SQL 语句这里就不说了,忘记的小伙伴可以翻一下上篇文章),但是并非随时都可以解锁.具体来说,InnoDB 采用的是两阶段锁定协议(tw ...
- DC-4 靶机渗透测试
DC-4 渗透测试 冲冲冲,努力学习 .掌握 hydra ,nc反弹shell 记住你要干嘛, 找地方上传shell(大多以后台登录为切入点,再反弹shell),shell提权到root 操作机:ka ...
- 单片机学习（二）开发板LED灯的控制
目录 开发板上LED灯相关的电路图 点灯 LED闪烁 LED流水灯 其他效果 灯光二进制计数器 进阶版流水灯 开发板上LED灯相关的电路图 这是P2相关7个引脚的电路图,在默认情况下它是直接接着VCC ...
- SQL语句（四）联表查询
目录 一.关联查询的分类 按年代分 按功能分 二.sql92语法的连接 语法 1. 简单应用 2. 为表起别名 3. 加入筛选 4. 加入分组 5. 三表连接 6. 非等值连接 7. 自连接 三.sq ...
- jadx的使用
使用jadx之前必须安装配置java环境才能正常打开运行 https://www.cnblogs.com/yhoil/p/14808648.html 一.前言 今天介绍一个非常好用的反编译的工具 ja ...
- Tensorflow2对GPU内存的分配策略
一.问题源起 从以下的异常堆栈可以看到是BLAS程序集初始化失败,可以看到是执行MatMul的时候发生的异常,基本可以断定可能数据集太大导致memory不够用了. 2021-08-10 16:38:0 ...