猫眼电影、天天:
1、安装cssrem插件
2、设置--->搜索cssrem--->
Fixed Digits 改为2 px转rem小数点最大长度,默认:6
Root Font Size 改为 50 根字体大小,默认是16px,即1rem = 16px,可自定义 修改完要重启vscode,此时输入50.5px会转换为1.01rem
3、index.html中引入reset.css:
@charset "utf-8"; /* CSS Document */ html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin: 0; padding: 0; } fieldset, c { border: none; } img { display: block; } address, caption, cite, code, dfn, th, var { font-style: normal; font-weight: normal; } ul, ol, li { list-style: none; } body { color: #333; font: 12px PingFang SC, microsoft yahei, sans-serif; background: #fff; } a { color: #fff; text-decoration: none; } /*清除浮动*/ .clear { clear: both } * { box-sizing: border-box } .border-1px::after { content: ''; position: absolute; top: 0; left: 0; -webkit-box-sizing: border-box; box-sizing: border-box; width: 200%; height: 200%; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: left top; transform-origin: left top; pointer-events: none; } body, html, #app { height: 100%; background: #f5f5f5; } @media (min- 240px) { html { font-size: 32px; } } @media (min- 320px) { html { font-size: 42.66667px; } } @media (min- 360px) { html { font-size: 48px; } } @media (min- 375px) { html { font-size: 50px; } } @media (min- 384px) { html { font-size: 51.2px; } } @media (min- 411px) { html { font-size: 54.8px; } } @media (min- 414px) { html { font-size: 55.2px; } } @media (min- 424px) { html { font-size: 56.53333px; } } @media (min- 480px) { html { font-size: 64px; } } @media (min- 540px) { html { font-size: 72px; } } @media (min- 640px) { html { font-size: 85.33333px; } } @media (min- 720px) { html { font-size: 96px; } } @media (min- 750px) { html { font-size: 100px; } } @media (min- 768px) { html { font-size: 102.4px; } } @media (min- 800px) { html { font-size: 106.66667px; } } @media (min- 980px) { html { font-size: 130.66667px; } } @media (min- 1024px) { html { font-size: 136.53333px; } } @media (min- 1080px) { html { font-size: 144px; } } @media (min- 1152px) { html { font-size: 153.6px; } } @media (min- 1366px) { html { font-size: 182.13333px; } } @media (min- 1440px) { html { font-size: 192px; } } @media (min- 2160px) { html { font-size: 288px; } }