Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 学习em rem vh vw与响应式布局
Blogger Information
Blog 7
fans 0
comment 0
visits 4853
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
学习em rem vh vw与响应式布局
波元的PHP学习
Original
680 people have browsed it

目录

  • em原理与应用
  • em用在什么地方？
  • em制作一组响应式的按钮组件
  • em定义字号
  • rem定义字号
  • em实现响应式布局

1、em原理与应用

当前页面中的元素字号的计算的依据em(在html标签处找)
em:浏览器文本的默认字号的相对关键字，通常是16px。
1em=16px

用em值设定字体大小，EM值大小是动态的，当定义或继承FONT-SIZE属性时，1EM等于该元素的字体大小。如果你在网页中任何地方都没有设置文字大小的话，那它将等于浏览器默认文字大小，通常是16px.所以通常1EM=16px. 如果你设置了body元素的字体大小为20px,那1em=20px.那个1就是当前em大小的倍数。

em可以自动适应用户的字体，em是个非常有用的CSS单位。

一个流行的技巧是设置body元素的字体大小为62.5%，等于10px.通过计算基准大小10px的倍数，这样有6px=0.6EM.

  1. body{
  2. font-size:1.6em;/* 1.6em=16px */}

2、em用在什么地方？

+设置响应式的文本字号
font-size是可以被继承的。
当前H2的字号，继承自它的祖先元素body,html
想改变H2的字号大小

  1. html{ font-size:20px; 也可以写成font-size:1.25em;
  2. h2:默认就是1.5em  这里等于30px
  3. }
  4. body div:first-of-type{
  5.     font-size:1em;
  6.     width:10em;
  7.     height:8em;
  8.     background-color:lightgreen;
  9. }

因为盒子的大小使用em，所以只需要设置盒子的font-size就可以动态的设置大小了。

3、em制作一组响应式的按钮组件

  1. .btn{background-color:#1e9fff
  2. color:#fff
  3. border:none;
  4. outline:none;
  5. }
  6. <body>
  7. <button class="btn">button</button>
  8. <button class="btn">button</button>
  9. <button class="btn">button</button>
  10. <body>
  12. .btn:hover{
  13.     opactiy:0.8;  透明度
  14.     cursor:pointer;  鼠标手型
  15.     box-shadow：0 0 3px #888;  阴影
  16.     transiton:0.3s; 延时
  18.  如果 想设置三个大小不同的按钮，只需要为这三个按钮指定不同的字号就可以了。
  19.  sytle
  20.  .small{font-size:10px; }
  21.  .normal{font-size：16；}
  22.  .larger{font-size:22}
  23.  sytle
  24. }

4、em定义字号

  1. <style>
  2. body{font-size:20px；或者
  3. font-size:1.25em;
  4. }
  5. </style>

font-size具有继承性，h2 font-size 1.5em/30px 所以，span的font-size也是30px.
<h2>php.cn<span>php中文</span> </h2>
em:动态性和继承性，但是也有缺点
我们非常的需要一个固定值的em，它不应该它自身和祖先的字号大小而变动。
用rem就可以解决这个问题。rem就是一个固定值的em.

5、rem定义字号

html{此时1em=20px font-size:1.25em }
em的初始值就是用户代理的值，默认就是16px
当前font-size属性出现在了html中
html叫根元素，一个页面中它是唯一的且是最大的包含块
所以，在html中定义的em大小，可看成一个常量（固定值）
html的所有后代元素，如果想引用html中的字号，就不能再用em了。
因为em具有继承性。
此时，我们用一个新的关键字来引用根元素中的字号大小font-size的值
这个关键字就是rem
h2 span{1rem=1*20px font-size:1rem;}

6、em实现响应式布局

  1. html{font-size:0.75em;
  2. }
  3. .panel{font-size:1rem;
  4. padding:1em;
  5. 边框不要用em/rem,一定要用px
  6. border-radius: 0.5em;
  7. background-color:#999;
  8. margin:2em;
  9. }
  10. .panel h2{ 以后的字号，强烈推荐使用rem设置。
  11.     font-size:1.2rem;
  12.     margin:1em 0;
  13. }
  14. .panel p{1.1rem=13.2px=12*1.1 
  15.     font-size:1.1rem
  16.     缩进2个字符。
  17.     text-indent:2em;
  18.     line-height:2;
  19.         }
  21. 屏幕宽度>=800px,字号放大到4px  
  22. @media screen and(min-width:800){
  23.     14/16=0.875em
  25. html{font-size:0.875em;
  27.     .panel{background-color:wheat;
  28.     }
  29. }
  30. 屏幕宽度>=1000px,字号放大到16px.
  31. @media screen and(min-width:1000){
  32.     14/16=0.875em
  34. html{font-size:1em;
  36.     .panel{background-color:lightcyan;
  37.     }
  38. }
  39. 屏幕宽度>=1200px,字号放大到16px.
  40. @media screen and(min-width:1200){
  41.     14/16=0.875em
  43. html{font-size:1.25em;
  45.     .panel{background-color:lightskyblue;
  46.     }
  47. }
  48. <div class=panel> <h2>内容</h2>
  49. </div>

2、视口单位：vh/vw

除了字号用REM，其它地方都可以用EM.或者希望得到一个可测试的固定值用REM.
视口：可视窗口，浏览器窗口中用于显示文档的可视区域。视口不包括地址栏，工具条，菜单栏，状态栏。

  • vh：视口的”初始包含块”的高度的百分之一（1/100）
  • VW:视口的“初始包含块”的宽度的百分比（1/100）
    这个主要用于移动端布局。

视口单位 ：vmin vmax

css可以自定义变量

—color：#0f00;
—a-border:1px solid;

css预处理器，用JS来编译CSS代码，less,sass

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