em原理与应用
什么是em？
em:是浏览器文本的默认字号的相对关键字，通常是16px
em应用在哪里？
- 设置响应式的文本字号
- 设置盒模型的属性的响应式
演示:用em制作一组响应式的按钮组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用em制作一组响应式的按钮组件</title>
<style>
.btn{
background-color: #1e9fff;
color: #fff;
border: none;
outline: none;
padding: 0.5em 1em;
border-radius: 0.3em;
}
.btn:hover{
/* 透明度 */
opacity: 0.8;
/* 将鼠标设置为手型 */
cursor: pointer;
box-shadow: 0 0 3px #888;
transition: 0.3s;
}
/* 如果想设置三个不同大小的按钮，只需要为这三个按钮制定不同的字号 */
.small{
font-size: 10px;
}
.normal{
font-size: 16px;
}
.big{
font-size: 22px;
}
/* 考虑一下 fontsize能不能在html中用em来定义 */
</style>
</head>
<body>
<button class="btn small">button</button>
<button class="btn normal">button</button>
<button class="btn big">button</button>
</body>
</html>
em定义字号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>em定义字号</title>
<style>
body{
/* font-size: 20px; */
font-size: 1.25em;
}
</style>
</head>
<body>
<h2>城南花开</h2>
<!-- font-size具有继承性，h2 font-size 1.5em/30px 所以span的fs也是30px -->
<!-- 我的本意不并不想让span内的文本与它描述的对象的大小一样 -->
<h2>城南花开<span>gzj2001.com</span></h2>
<!-- em:动态性和继承性，但是也有缺点 -->
<!-- 我们非常需要一个固定值的EM,它不应该随着自身和祖先元素的字号大小而改变 -->
<!-- 用rem就可以解决掉 rem就是一个固定值的em -->
</body>
</html>
rem定义字号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>rem定义字号</title>
<style>
html {
/* em的初始值就是用户代理的值，默认就是16px */
/* 1em=20px */
font-size: 1.25em;
/* 此时1em=20px */
/* 当前font-size属性出现在了html中，html叫根元素，一个页面中他是唯一的且是最大的包含块 */
/* 所以在html中定义的em大小可以看成一个常量(不变的值 固定的值) */
/* html的所有后代元素,如果想引用html中的字号,就不能再用em了 */
/* 因为em具有继承性 */
/* 此时,我们用一个新的关键字来引用根元素中的字号大小 font-size的值 */
/* 这个关键字就是:rem */
}
h2 {
font-size:1.5rem;
}
h2 span {
font-size: 1rem;
}
</style>
</head>
<body>
<h2>城南花开<span>gzj2001.com</span></h2>
</body>
</html>
em实现响应式布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>em实现响应式布局</title>
<style>
/* 设置根元素字号 */
html{
font-size: 0.75em;
/* 后面可就可以直接使用 rem 来引用 12px来定义字号或其他属性 */
}
.panel{
font-size:1rem;
/* 此时当前元素.panel中的其他属性，如果用到了em就是12px 1rem */
padding: 1em;
/* 0.5em=6px */
border-radius: 0.5em;
border: 1px solid #888;
/* 边框不要用em/rem 一定要用px */
background-color: #eee;
margin: 2em;
}
.panel h2{
/* 以后的字号，强烈推荐使用rem设置 */
font-size: 1.2rem;
margin: 1em 0;
}
.panel p{
font-size: 1.1rem;
text-indent: 2em;
}
/* 屏幕宽度>=800px,字号放大到14px */
@media screen and (min-width:800px) {
html{
font-size: 0.875rem;
}
.panel{
background-color: #555;
}
}
/* 屏幕宽度>=1000px,字号放大到16px */
@media screen and (min-width:1000px) {
html{
font-size: 1rem;
}
.panel{
background-color: red;
}
}
/* 屏幕宽度>=1200px,字号放大到120px */
@media screen and (min-width:1200px) {
html{
font-size: 1.25rem;
}
.panel{
background-color: green;
}
}
</style>
</head>
<body>
<div class="panel">
<h2>嫦娥五号成功返回地球，世界各国态度答案不同</h2>
<div class="panel-body">
<p>阿萨德股份撒谎个阿萨德如果以后说到这个暗示如果还有点烦这个如实告知新东方和改变消费者村干部和大富豪都是灰色的任何地方和
</p>
</div>
</div>
</body>
</html>
视口单位 vh vw
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>视口单位 vh / vw</title>
<style>
/* 视口: 可视窗口，浏览器窗口中用于显示文档的可视区域 */
/* 视口 不包括 地址栏 菜单栏 工具条 状态栏 */
/* vh:视口的 初始包含块的高度的百分之一（1/100） */
/* vw:视口的 初始包含快的宽度的百分之一（1/100） */
/* 初始包含快:目前可以简单的理解为 html */
.box{
width: 50vw;
height: 50vh;
background-color: green;
margin: auto;
}
/* 这个主要用于移动端布局
*/
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
视口单位 vmin vmax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>视口单位 vmin vmax</title>
<style>
/* .box{
width: 50vw;
height: 50vh;
background-color: red;
margin: auto;
} */
/* .box{
width: 50vmin;
height: 50vmin;
background-color: red;
margin: auto;
} */
.box{
width: 50vmax;
height: 50vmax;
background-color: red;
margin: auto;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
css原生变量/自定义属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css原生变量/自定义属性</title>
<style>
body{
--color:#f00;
/* css预处理器，用js来编译css代码，less，sass */
}
a{
color: var(--color);
}
</style>
</head>
<body>
<a href="">cnhk</a>
</body>
</html>
作业内容
作业标题：1217作业
作业内容：
- 按自己理解的方式详细描述em,rem的原理与应用场景 ，并实例演示
- 分析 rem / em /vh/ vw的区别与联系
演示地址: https://php.gzj2001.com/1217/index.html
作业代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1217作业</title>
<style>
/* html默认的大小应该是16px = 1em */
/* 我们这里重新定义 根元素的 1em等于 16*1.25=20 */
/* 此时 其他元素的 1em=20px */
html{
font-size:1.25em;
}
/* h1的默认fontsize是2个em。在devtool里面我们可以看到 h1 font-size=2em， computed里面显示等于40px */
/* h2默认1.5em 此时是30px */
/* 此时我们定义字体大小等于1rem。 而rem是相对于根元素定义的rem来作为单位的 */
/* 此时观察 我们发现，h2的字体大小仅有1rem = 20px = 我们定义的根元素的em */
h2{
font-size: 1rem;
}
/* 创建一个box容器 示例演示 */
.box{
width: 5rem;
height: 5rem;
}
/* 如果屏幕宽度小于500px 那么 我们重新定义根元素 1rem = 32px */
@media screen and (min-width: 500px) {
html{
font-size: 2rem;
}
.box{
background-color: red;
}
}
/* 如果屏幕宽度小于800px 那么 我们重新定义根元素 1rem = 32px */
@media screen and (min-width: 800px) {
html{
font-size: 3rem;
}
.box{
background-color: green;
}
}
/* 如果屏幕宽度小于1000px 那么 我们重新定义根元素 1rem = 32px */
@media screen and (min-width: 1000px) {
html{
font-size: 4rem;
}
.box{
background-color: yellow;
}
}
.box2{
width: 50vmin;
height: 50vmin;
background-color: #000;
margin: auto;
}
</style>
</head>
<body>
<h1>城南花开</h1>
<h2>www.gzj2001.com</h2>
<span>em与rem在响应式布局里面更有优势，通过不同的设备尺寸查询，仅修改em即可完成多界面适配</span>
<br>
<span>vh /vw 将 用户看到区域划分为100份，保证用户不同大小所看到的内容不失真</span>
<br>
<span>在不同尺寸中，rem和em等会改变用户主观感知的相对比例大小，而vh vx 始终都是那个百分比</span>
<div class="box"></div>
<div class="box2"></div>
</body>
</html>
其他信息
My Blog https://www.gzj2001.com
My Blog In PHP.cn:https://www.php.cn/blog/linwx611.html