简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > css基础学习（rem / em /vh/ vw的原理与应用场景）
Blogger Information
Blog 40
fans 0
comment 1
visits 34279
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
css基础学习（rem / em /vh/ vw的原理与应用场景）
景云
Original
657 people have browsed it
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>em</title>
  7.     <style>
  8.         .btn
  9.         {
  10.             background-color: aqua;
  11.             color:rgb(60, 63, 63);
  12.             border: none;
  13.             padding: 0.5em 1em;
  14.             outline: none;
  15.             border-radius: 0.3em;
  16.         }
  17.         .btn:hover
  18.         {
  19.             /* 透明度 */
  20.             opacity: 0.8;
  21.             /* 将鼠标设置为手型 */
  22.             cursor: pointer;
  23.             /* 阴影效果 */
  24.             box-shadow: 0 0 5px red;
  25.             /* 延时体现效果 */
  26.             transition: 0.2s;
  27.         }
  28.         /* 改变按钮不同大小可通过改变其字号即可，可通过px定义，也可以用em */
  29.         .small
  30.         {
  31.             font-size: 0.7em;
  32.         }
  33.         .normal
  34.         {
  35.             font-size: 1em;
  36.         }
  37.         .big
  38.         {
  39.             font-size: 1.5em;
  40.         }
  41.     </style>
  42. </head>
  43. <body>
  44.     <!-- 
  45.         em是用户代理的值，可以响应式的设置盒模型的属性，以达到不同屏幕显示不同大小的目的。 
  46.         用户代理默认值为1em，换算为px通常为16px；可通过设置祖先元素字体大小更改em的大小，例如：设置html的font-size：20px，则1em等于20px；
  47.     -->
  48.     <button class="btn small">button</button>
  49.     <button class="btn normal">button</button>
  50.     <button class="btn big">button</button>
  51.     <!-- rem为固定ban的em，不会随自身和祖先元素的字号变化而变化 -->
  52.     <!-- vw为可视窗口的初始包含块宽度的百分之一； -->
  53.     <!-- vh为视口的初始化包含块高度的百分之一； -->
  54.     <!-- 初始化包含块可简单理解为html -->
  55.     <!-- 宽高以vmin、vmin为单位时，将以较小尺寸为主，以vmax/vmax为单位时将以较大尺寸为主 -->
  56. </body>
  57. </html>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！