经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS3 » 查看文章
em与rem有什么区别?移动设备中的适配方案
来源:cnblogs  作者:小方哥·  时间:2019/6/26 9:14:40  对本文有异议

em与rem之间的区别:

  • 共同点:
  1. 它们都是像素单位
  2. 它们都是相对单位
  • 不同点:
  1. em大小是基于父元素的字体大小
  2. rem大小是基于根元素(html)的字体的大小

实例:

  1. <!DOCTYPE html>
  2. <html lang="en" style="font-size: 50px">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <style>
  7. body {
  8. margin: 0;
  9. padding: 0;
  10. line-height: 1;
  11. }
  12. .container {
  13. font-size: 25px;
  14. }
  15. .em {
  16. font-size: 2em;
  17. }
  18. .rem {
  19. font-size: 2rem;
  20. }
  21. </style>
  22. </head>
  23. <body>
  24. <div class="container">
  25. <div class="em">AAAAA</div>
  26. <div class="rem">AAAAA</div>
  27. </div>
  28. </body>
  29. </html>

rem适配方案:

  • 核心原理:宽度和高度都能做到适配(等比缩放)
  • 通过控制 html 元素上的字体大小去控制页面上所有以rem为单位的基准值,控制尺寸
  • 核心换算公式:当前rem基准值 = 预设基准值 / 设计稿宽度 * 当前设备的宽度
  • 技术:媒体查询

实例:

  • 预设基准值: 100px
  • 设计稿宽度:640px
  • 假设的设备:640px, 414px,  320px
  • 注意:由于媒体查询代码是从上往下执行的,所以代码书写顺序要从小到大(如果不的话,可以选择其他方案,例如:min-width 和 max-width 都设置)
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5. <meta charset="UTF-8">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  8. <title>rem适配</title>
  9. <style type="text/css">
  10. * {
  11. margin: 0;
  12. padding: 0;
  13. }
  14. /* 假设的设备 320 414 640 */
  15. @media (min-width: 320px) {
  16. html {
  17. font-size: 50px;
  18. }
  19. }
  20. @media (min-width: 414px) {
  21. html {
  22. font-size: 64.6875px; /* 100/640*414 */
  23. }
  24. }
  25. @media (min-width: 640px) {
  26. html {
  27. font-size: 100px;
  28. }
  29. }
  30. /* rem适配 */
  31. header {
  32. width: 100%;
  33. height: 1rem;
  34. line-height: 1rem;
  35. font-size: 0.32rem;
  36. text-align: center;
  37. background: green;
  38. color: #fff;
  39. }
  40. </style>
  41. </head>
  42.  
  43. <body>
  44. <header>购物车</header>
  45. </body>
  46.  
  47. </html>

 

原文链接:http://www.cnblogs.com/duxiu-fang/p/11085690.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号