设计稿一般以750px作为整屏宽度，而网站最小字体大小为12px，所以这里以750/12 = 62.5作为屏幕水平栏栅数量，同时12px也是蓝湖默认的rem方案根字体大小。
    我们在入口文件中添加以下逻辑即可。

    1. (() => {
    2.   const setFontSize = () => {
    3.     let clientWidth = document.documentElement.clientWidth;
    4.     if (clientWidth > 750) {
    5.       clientWidth = 750;
    6.     } else if (clientWidth < 320) {
    7.       clientWidth = 320;
    8.     }
    9.     global.rootFontSize = clientWidth / 62.5; // 这里用了一个全局的rootFontSize保存根字体大小，以便在其他地方用到，全局变量可自行定义
    10.     document.getElementsByTagName('html')[0].style.fontSize = `${global.rootFontSize}px`;
    11.   }
    12.   window.onresize = setFontSize;
    13.   setFontSize();
    14. })();

    配合最大宽度为750px的公共版心可以友好支持PC端

    1. .box {
    2.     max-width: 750px;
    3.     min-height: 100vh;
    4.     background-color: white;
    5.     margin: 0 auto;
    6. }

    示例：

    1. .header {
    2.     position: relative;
    3.     height: 33.33rem;
    4.     background: linear-gradient(-30deg, #33CA88, #37DD8F);
    5.     padding: 7.83rem 3.17rem;
    6.     overflow: hidden;
    8.     .circle {
    9.         position: absolute;
    10.         width: 34.5rem;
    11.         height: 34.5rem;
    12.         top: -17.25rem;
    13.         right: -17.25rem;
    14.         z-index: 2;
    15.     }
    17.     .title {
    18.         font-size: 6rem;
    19.         font-family: PingFang SC;
    20.         font-weight: 800;
    21.         color: #FFFFFF;
    22.         text-shadow: 0rem 1rem 1rem rgba(0, 113, 67, 0.3);
    23.         background: linear-gradient(180deg, #FFFFFF 46.240234375%, #44FFB3 100%);
    24.         -webkit-background-clip: text;
    25.         -webkit-text-fill-color: transparent;
    26.     }
    28.     .time {
    29.         margin-top: 2.67rem;
    30.         width: 15rem;
    31.         height: 3.33rem;
    32.         background: rgba(0, 113, 67, 0.3);
    33.         border-radius: 2rem;
    34.         display: flex;
    35.         flex-direction: row;
    36.         justify-content: center;
    37.         align-items: center;
    38.         overflow: hidden;
    40.         .timeIcon {
    41.             width: 1.67rem;
    42.             height: 1.67rem;
    43.             margin-right: 0.58rem;
    44.         }
    46.         .timeText {
    47.             font-size: 2rem;
    48.             font-family: PingFang SC;
    49.             font-weight: 500;
    50.             color: #FFFFFF;
    51.         }
    52.     }
    53. }
    1. <div className="box">
    2.   <div className={styles.header}>
    3.       <img className={styles.circle} src="/assets/images/circle.png" alt="" />
    4.       <div className={styles.title}>舌诊</div>
    5.       <div className={styles.time}>
    6.           <img className={styles.timeIcon} src="/assets/images/clock.png" alt="" />
    7.           <div className={styles.timeText}>预计5分钟</div>
    8.       </div>
    9.   </div>
    10. </div>

    image.png