整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
端开发中长度单位有很多，最为常用和熟知的肯定就是px了，随着前端的不断发展，em和rem也越来越普及，只用px一把梭的时代早已成为过去。是px过时了吗？如果对这些单位的使用场景不够了解，可能就会拿着一个rem从头梭到尾了。本篇我们来好好梳理一下css中的长度单位以及它们的使用场景，我们要在合适的场景使用合适的单位。
px是像素点单位，与之线性相关的单位有mm（毫米）、cm（厘米）、in（英寸）、pt（点，印刷术语，1/72英寸）、pc（派卡，印刷术语，12点）。
1in = 25.4mm = 2.54cm = 6pc = 72pt = 96pxem是相对长度单位，适合基于特定的字号进行排版。1em=当前元素的字号，其准确值取决于作用的元素。
.padded {
font-size: 16px;
padding: 1rem;
}上面的代码设置了元素的内边距为16px。最终浏览器会根据相对单位计算出绝对值。
使用em来设置padding、height、width、border-radius很合适，当前元素如果继承了不同的字号，响应的内边距、宽高也会自动随之缩放。
需要注意的是，如果使用em定义元素的字号，em的表现会稍有不同。上面提到，当前元素的字号决定了1em的值，但是，如果声明font-size：1.2em，该元素的字号肯定不能等于自己的1.2倍。实际上，此时font-size是根据当前元素继承的字号来计算的。
em示例
上图可以看到，p标签中的字号是1.2*16=19.2px，font-size是根据继承的字号计算的。
em需要注意的就在于此，同时用它指定一个元素的字号和其他属性时，浏览器必须先计算字号，然后使用这个计算值算出其余的属性值。
另外，当用em来指定多重嵌套的元素的字号时，就会产生意外的结果，内嵌的元素会一直继承上级的字号，导致要么嵌套字号越来越大，要么越来越小。
rem和em很像，其实和em的理念很像，都是相对单位，rem中的r是root，顾名思义，rem是相对一个root元素（一般以html标签作为根元素）计算值的，不管在文档的什么位置。
rem结合了px和em的优先，既保留了相对单位的优势，又简单易用可控。那只用rem行吗？行，也不行。如果你只了解习惯这一个单位，就要充分发挥rem的优势，全站梭到底也没什么不行的。但是如果你想写出简单好看的css代码，在不同的场景下使用适当的单位会让你和你的队友少趟许多的坑。
一般情况下，我会使用rem设置字号，用px设置边框、用em来设置其他大部分的属性，尤其是内边距、外边距、圆角等。这样字号是可预测的，同时还能在其他因素改变元素字号时，借助em缩放内外边距。你觉得呢？
我们先介绍一下概念：
视口：浏览器窗口里网页可见部分的边框区域，不包括浏览器的地址栏、工具栏、状态栏。
vh：视口高度的1/100
vw：视口宽度的1/100
vmin：视口宽、高中较小的一方的1/100
vmax：视口宽、高中较大的一方的1/100
从定义上，相信小伙伴们已经明白了视口单位的用法。我来介绍相对视口单位的一个比较特别的用途：设置字号。诶？之前不是说设置字号用rem吗？用视口单位能有什么特别的呢？
用rem设置字号的时候，为了适配不同的屏幕大小，免不了要使用@media根据不同的屏幕设置根元素的字号大小，有一个小小的问题是，如果动态去调整浏览器的宽度，达到设置的断点时，一定程度会导致页面的字体突然变大或缩小。但是，如果是使用vw来设置字号呢？页面的字号是不是就不会突然的变化？会很平滑？
当然了，这种用法在实际应用中推广的程度不是特别高，有些是因为浏览器支持的问题，有些是因为没必要因为这么一点点的优化，而放弃心爱的rem。
今天所写的内容主要是帮大家回顾一下css单位的用途及场景，还有一些单位（如fr）还没有提及，将会在后面的文章中结合别的属性写。各种单位的存在一定都有各自的特长和适合的场景，偶尔打开一下思路，也许能有更好的解决方案。大家有想和我分享的内容吗？感谢评论关注哦！
m参考该元素的字体大小而定
rem->root 参考根元素(html)的字体大小, html默认字体的大小: 14px
使用rem单位开发移动端页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 15rem;
height: 100px;
background-color: red;
}
</style>
<meta name="viewport" content="width=device-width,initial-scale=1" />
</head>
<body>
<div></div>
<script type="text/javascript">
//获取dpr
var dpr = window.devicePixelRatio;
//获取缩放比
var scale = 1 / dpr;
//重写写入meta标签
document.write('<meta name="viewport" content="width=device-width,initial-scale='+scale+'" />');
//获取设备宽度(分辨率)
var w = document.documentElement.clientWidth;
//获取html
var html = document.getElementsByTagName("html")[0];
html.style.fontSize = w / 15 + "px";
</script>
</body>
</html>vw
css3新单位，viewpoint width的缩写, 视窗宽度, 1vw等于视窗宽度的1%。
举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。
vh
css3新单位, viewpoint height的缩写, 视窗高度, 1vh等于视窗高度的1%。
举个例子：浏览器高度900px, 1 vh = 900px/100 = 9 px。
vm
css3新单位, 相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm
举个例子：浏览器高度900px, 宽度1200px, 取最小的浏览器高度, 1 vm = 900px/100 = 9 px。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
/*html,body{
height: 100%;
}*/
div{
width: 100px;
/*height: 100%;*/
height: 50vw;
background-color: red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>em 是一个很早就出现的单位, IE6 都可以兼容。但是 rem 是 CSS3 的属性, 使用的时候要注意它的兼容性问题。目前 rem 通常应用在移动端的 WEB 开发上。
Rem 适配的优点： Rem 的参考值只有一个, 就是 HTML 字体大小, 所以不会像百分比适配那样要明确参考谁。
Rem 使用的范围比较广, 元素的高度宽度、border 宽度、字号大小、间距和偏移量等都可以用 rem 做单位 Rem 适配的时候不需要做多套样式, 可以直接按比例改变 HTML字体的大小。
Rem 适配的缺点： Rem 是 CSS3 的属性, 只有比较新的浏览器上可以使用, 一般都是用在移动端。目前大厂的 H5 页面, 基本都在使用 Rem 方式做屏幕适配了。
Rem 最后换算出来的值还是 px, 所以对于按比例分配空间这种需求是没法满足的, 需要和其他适配方式混合使用。
<html>
<head>
<title>这是网页标题</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<meta name="keywords" content="这是关键字"/>
<link href="css文件路径" rel="stylesheet"/>
<link rel="shortcut icon" href="favicon.ico"/>
</head>
<body>
</body>
</html>标签 | 含义 | 常用属性 |
a | 超链接 | href / target / title |
img | 图片 | src / alt / title / width / heiht |
h1-h6 | ||
p | ||
br | ||
hr | ||
em | ||
strong | ||
i | ||
span | ||
div |
ID | CLASS | 标签 |
100 | 10 | 1 |
样式 | 含义 | 属性值 |
*请认真填写需求信息，我们会在24小时内与您取得联系。
