移动端常用单位——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 ...
随机推荐
- How to Install KDE on Ubuntu 16.04
sudo add-apt-repository ppa:kubuntu-ppa/backportssudo apt-get updatesudo apt-get dist-upgradesudo ap ...
- js中的 true 与 false
可判断为 false 的情况: 0,-0,NaN,undedined,"",false,null,缺省的值 可判断为 true 的情况: 除false的其他情况均可,包括负数.&q ...
- Python基础之控制台打印不同颜色字符串
参考文章:https://www.cnblogs.com/daofaziran/p/9015284.html 打印各种颜色的文字,但是需要传入文字 print_color.py "" ...
- SQL Server CPU 利用率毛刺的分析定位与解决
一.背景 1.1 问题描述 近期发现一台SQL Server的CPU利用率很不稳定,发现不定时的飙升到100%,更可怕的是在业务繁忙时,影响了业务调用,失败率明显增加,所以,减低CPU的利用率,是迫切 ...
- 电脑软件安装过程文档.BA
MD 01-打印并阅读-电脑软件安装过程文档.BAT-即此批处理脚本文档MD 02-阅读-电脑软件安装经验教训文档.DOCX-MD 03-制作-杏雨梨云USB维护系统2019中秋版之国庆更新-可启动U ...
- C++动态内存管理与源码剖析
引言 在本篇文章中,我们主要剖析c++中的动态内存管理,包括malloc.new expression.operator new.array new和allocator内存分配方法以及对应的内存释放方 ...
- 在阿里云上单机部署k8s1.18
系统:CentOS Linux release 8.1.1911 配置主机名 [root@iZwz9e3t4tj14jzewdtvj8Z ~]# hostnamectl set-hostname la ...
- JUC学习笔记（五）
JUC学习笔记(一)https://www.cnblogs.com/lm66/p/15118407.html JUC学习笔记(二)https://www.cnblogs.com/lm66/p/1511 ...
- Nat Comm | 中科院动物所张勇团队合作揭示动物中DNA转座子介导基因重复的机制
1950年Barbara Mclintock 首次在玉米中发现转座子(TEs),并由此获得诺贝尔奖.尽管长期被认为是垃圾DNA,但现在TEs被广泛认可是宿主基因组演化的重要推动力.它们可引起包含基因重 ...
- JavaGUI三种布局管理器FlowLayout,BorderLayout,GridLayout的使用
三种布局管理器 流式布局FlowLayout package GUI; import java.awt.*; import java.awt.event.WindowAdapter; import j ...