以1920设计稿为基准
1、使用sass语法 转换px rem ，静态站点推荐使用我之前提到的 vscode插件easy-scss
https://www.cnblogs.com/joyZ/p/13342794.html
// PX 转 rem @function px2Rem($px, $base-font-size: 18px) { @if (unitless($px)) { //有无单位 @return ($px / 19.2) * 1rem; } @else if (unit($px) == em) { @return $px; } @return ($px / $base-font-size) * 1rem; }
2、设置媒体查询
@media screen and (max-width: 1920px) { html { font-size: 19.2px; } } @media screen and (max-width: 1680px) { html { font-size: 16.8px; } } @media screen and (max-width: 1380px) { html { font-size: 14.4px; } } @media screen and (max-width: 1300px) { html { font-size: 12.8px; } }
3、适配代码
height: px2Rem(70px); -- 调用scss函数将px转换为对应rem
补充：
// 设计一个函数，这个函数用于获取屏幕的宽度，动态给html标签设置font-size (function(win,doc){ // 获取到html标签 const docEl = doc.documentElement; // 检测一下目前屏幕是横屏还是竖屏 const resizeEvent = "orientationchange" in window? "orientationchange":"resize"; // 每个屏幕对应的font-size const compute = function(){ const width = docEl.clientWidth; console.log(width); if(!width) return; if(width > 750){ docEl.style.fontSize="100px"; }else{ docEl.style.fontSize= (width/750)* 100 +"px" } } // 窗口发生变化 重新计算 win.addEventListener(resizeEvent,compute,false) // 页面加载了 重新计算 doc.addEventListener("DOMContentLoaded",compute,false) compute(); })(window,document)