em與rem之間的區別： 共同點： 不同點： 實例： rem適配方案: 核心原理：寬度和高度都能做到適配（等比縮放） 通過控制 html 元素上的字體大小去控制頁面上所有以rem為單位的基準值，控制尺寸 核心換算公式：當前rem基準值 = 預設基準值 / 設計稿寬度 * 當前設備的寬度 技術：媒體查 ...
em與rem之間的區別：
- 共同點：
- 它們都是像素單位
- 它們都是相對單位
- 不同點：
- em大小是基於父元素的字體大小
- rem大小是基於根元素(html)的字體的大小
實例：
<!DOCTYPE html> <html lang="en" style="font-size: 50px"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { margin: 0; padding: 0; line-height: 1; } .container { font-size: 25px; } .em { font-size: 2em; } .rem { font-size: 2rem; } </style> </head> <body> <div class="container"> <div class="em">AAAAA</div> <div class="rem">AAAAA</div> </div> </body> </html>
rem適配方案:
- 核心原理：寬度和高度都能做到適配（等比縮放）
- 通過控制 html 元素上的字體大小去控制頁面上所有以rem為單位的基準值，控制尺寸
- 核心換算公式：當前rem基準值 = 預設基準值 / 設計稿寬度 * 當前設備的寬度
- 技術：媒體查詢
實例:
- 預設基準值： 100px
- 設計稿寬度：640px
- 假設的設備：640px， 414px， 320px
- 註意：由於媒體查詢代碼是從上往下執行的，所以代碼書寫順序要從小到大(如果不的話，可以選擇其他方案，例如：min-width 和 max-width 都設置)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>rem適配</title> <style type="text/css"> * { margin: 0; padding: 0; } /* 假設的設備 320 414 640 */ @media (min-width: 320px) { html { font-size: 50px; } } @media (min-width: 414px) { html { font-size: 64.6875px; /* 100/640*414 */ } } @media (min-width: 640px) { html { font-size: 100px; } } /* rem適配 */ header { width: 100%; height: 1rem; line-height: 1rem; font-size: 0.32rem; text-align: center; background: green; color: #fff; } </style> </head> <body> <header>購物車</header> </body> </html>
