<p style="margin: 10px auto; padding: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; white-space: normal;"><span style="margin: 0px; padding: 0px; font-family: "Microsoft YaHei"; font-size: 16px;">假设设计妹妹给我们的设计稿尺寸为 750 * 1500 。结合网易移动端首页html元素上的动态font-size属性、设计稿尺寸、前端与设计之间协作流程一般分为下面两种：</span></p><p style="margin: 10px auto; padding: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; white-space: normal; "><strong style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-family: "Microsoft YaHei"; font-size: 18px;">1、网易做法</span></strong></p><p style="margin: 10px auto; padding: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; white-space: normal; "><span style="margin: 0px; padding: 0px; font-family: "Microsoft YaHei"; font-size: 16px;">引入：页面开头出引入下面这段代码，用于动态计算font-size</span></p><p style="margin: 10px auto; padding: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; white-space: normal; "><span style="margin: 0px; padding: 0px; font-family: "Microsoft YaHei"; font-size: 16px;"></span></p><pre style="background-color:#262e37;color:#ffffff;font-family:'Consolas';font-size:11.3pt;">(<span style="color:#f92672;">function</span>(<span style="color:#fd971f;font-style:italic;">doc</span>, <span style="color:#fd971f;font-style:italic;">win</span>) {<br/> <span style="color:#f92672;">var </span><span style="color:#64a2a2;">docEl </span><span style="color:#f92672;">= </span><span style="color:#fd971f;font-style:italic;">doc</span>.<span style="color:#660e7a;font-weight:bold;">documentElement</span>,<br/> <span style="color:#64a2a2;">isIOS </span><span style="color:#f92672;">= </span><span style="color:#660e7a;font-weight:bold;font-style:italic;">navigator</span>.<span style="color:#660e7a;font-weight:bold;">userAgent</span>.<span style="color:#4ac60a;">match</span>(<span style="color:#e6db74;">/\(i[^;]+;( U;)? CPU.+Mac OS X/</span>),<br/> <span style="color:#64a2a2;">dpr </span><span style="color:#f92672;">= </span><span style="color:#64a2a2;">isIOS </span><span style="color:#f92672;">? </span><span style="color:#660e7a;font-weight:bold;font-style:italic;">Math</span>.<span style="color:#4ac60a;">min</span>(<span style="color:#fd971f;font-style:italic;">win</span>.<span style="color:#660e7a;font-weight:bold;">devicePixelRatio</span>, <span style="color:#ae81ff;">3</span>) <span style="color:#f92672;">: </span><span style="color:#ae81ff;">1</span>,<br/> <span style="color:#64a2a2;">dpr </span><span style="color:#f92672;">= </span><span style="color:#660e7a;font-weight:bold;font-style:italic;">window</span>.<span style="color:#660e7a;font-weight:bold;">top </span><span style="color:#f92672;">=== </span><span style="color:#660e7a;font-weight:bold;font-style:italic;">window</span>.<span style="color:#660e7a;font-weight:bold;">self </span><span style="color:#f92672;">? </span><span style="color:#64a2a2;">dpr </span><span style="color:#f92672;">: </span><span style="color:#ae81ff;">1</span>, <span style="color:#5b7773;background-color:#191f26;">//</span><span style="color:#5b7773;background-color:#191f26;font-family:'宋体';">被</span><span style="color:#5b7773;background-color:#191f26;">iframe</span><span style="color:#5b7773;background-color:#191f26;font-family:'宋体';">引用时，禁止缩放</span><span style="color:#5b7773;font-family:'宋体';"><br/></span><span style="color:#5b7773;font-family:'宋体';"> </span><span style="color:#64a2a2;">dpr </span><span style="color:#f92672;">= </span><span style="color:#ae81ff;">1</span>,<br/> <span style="color:#64a2a2;">scale </span><span style="color:#f92672;">= </span><span style="color:#ae81ff;">1 </span><span style="color:#f92672;">/ </span><span style="color:#64a2a2;">dpr</span>,<br/> <span style="color:#64a2a2;">resizeEvt </span><span style="color:#f92672;">= </span><span style="color:#e6db74;">'orientationchange' </span><span style="color:#f92672;">in </span><span style="color:#660e7a;font-weight:bold;font-style:italic;">window </span><span style="color:#f92672;">? </span><span style="color:#e6db74;">'orientationchange' </span><span style="color:#f92672;">: </span><span style="color:#e6db74;">'resize'</span>;<br/> <span style="color:#64a2a2;">docEl</span>.<span style="color:#660e7a;font-weight:bold;">dataset</span>.dpr <span style="color:#f92672;">= </span><span style="color:#64a2a2;">dpr</span>;<br/> <span style="color:#f92672;">var </span><span style="color:#64a2a2;">metaEl </span><span style="color:#f92672;">= </span><span style="color:#fd971f;font-style:italic;">doc</span>.<span style="color:#4ac60a;">createElement</span>(<span style="color:#e6db74;">'meta'</span>);<br/> <span style="color:#64a2a2;">metaEl</span>.<span style="color:#660e7a;font-weight:bold;">name </span><span style="color:#f92672;">= </span><span style="color:#e6db74;">'viewport'</span>;<br/> <span style="color:#64a2a2;">metaEl</span>.<span style="color:#660e7a;font-weight:bold;">content </span><span style="color:#f92672;">= </span><span style="color:#e6db74;">'initial-scale=' </span><span style="color:#f92672;">+ </span><span style="color:#64a2a2;">scale </span><span style="color:#f92672;">+ </span><span style="color:#e6db74;">',maximum-scale=' </span><span style="color:#f92672;">+ </span><span style="color:#64a2a2;">scale </span><span style="color:#f92672;">+ </span><span style="color:#e6db74;">', minimum-scale=' </span><span style="color:#f92672;">+ </span><span style="color:#64a2a2;">scale</span>;<br/> <span style="color:#64a2a2;">docEl</span>.<span style="color:#660e7a;font-weight:bold;">firstElementChild</span>.<span style="color:#4ac60a;">appendChild</span>(<span style="color:#64a2a2;">metaEl</span>);<br/> <span style="color:#f92672;">var </span><span style="font-style:italic;">recalc </span><span style="color:#f92672;">= function</span>() {<br/> <span style="color:#f92672;">var </span><span style="color:#64a2a2;">width </span><span style="color:#f92672;">= </span><span style="color:#64a2a2;">docEl</span>.<span style="color:#660e7a;font-weight:bold;">clientWidth</span>;<br/> <span style="color:#f92672;">if </span>(<span style="color:#64a2a2;">width </span><span style="color:#f92672;">/ </span><span style="color:#64a2a2;">dpr </span><span style="color:#f92672;">> </span><span style="color:#ae81ff;">750</span>) {<br/> <span style="color:#64a2a2;">width </span><span style="color:#f92672;">= </span><span style="color:#ae81ff;">750 </span><span style="color:#f92672;">* </span><span style="color:#64a2a2;">dpr</span>;<br/> }<br/> <span style="color:#5b7773;background-color:#191f26;">// </span><span style="color:#5b7773;background-color:#191f26;font-family:'宋体';">乘以</span><span style="color:#5b7773;background-color:#191f26;">100</span><span style="color:#5b7773;background-color:#191f26;font-family:'宋体';">，</span><span style="color:#5b7773;background-color:#191f26;">px : rem = 100 : 1</span><span style="color:#5b7773;"><br/></span><span style="color:#5b7773;"> </span><span style="color:#64a2a2;">docEl</span>.<span style="color:#660e7a;font-weight:bold;">style</span>.<span style="color:#660e7a;font-weight:bold;">fontSize </span><span style="color:#f92672;">= </span><span style="color:#ae81ff;">100 </span><span style="color:#f92672;">* </span>(<span style="color:#64a2a2;">width </span><span style="color:#f92672;">/ </span><span style="color:#ae81ff;">750</span>) <span style="color:#f92672;">+ </span><span style="color:#e6db74;">'px'</span>;<br/> };<br/> <span style="font-style:italic;">recalc</span>()<br/> <span style="color:#f92672;">if </span>(<span style="color:#f92672;">!</span><span style="color:#fd971f;font-style:italic;">doc</span>.<span style="color:#660e7a;font-weight:bold;">addEventListener</span>) <span style="color:#f92672;">return</span>;<br/> <span style="color:#fd971f;font-style:italic;">win</span>.<span style="color:#4ac60a;">addEventListener</span>(<span style="color:#64a2a2;">resizeEvt</span>, <span style="font-style:italic;">recalc</span>, <span style="color:#f92672;">false</span>);<br/>})(<span style="color:#660e7a;font-weight:bold;font-style:italic;">document</span>, <span style="color:#660e7a;font-weight:bold;font-style:italic;">window</span>);</pre><p style="margin: 10px auto; padding: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; white-space: normal; "><span style="margin: 0px; padding: 0px; font-family: "Microsoft YaHei"; font-size: 16px;">使用：</span></p><p style="margin: 10px auto; padding: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; white-space: normal; "><span style="margin: 0px; padding: 0px; font-family: "Microsoft YaHei"; font-size: 16px;">未引入前：</span></p><p style="margin: 10px auto; padding: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; white-space: normal; "><span style="margin: 0px; padding: 0px; font-family: "Microsoft YaHei"; font-size: 16px;">body {</span></p><p style="margin: 10px auto; padding: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; white-space: normal; "><span style="margin: 0px; padding: 0px; font-family: "Microsoft YaHei"; font-size: 16px;"> width: 750px;</span></p><p style="margin: 10px auto; padding: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; white-space: normal; "><span style="margin: 0px; padding: 0px; font-family: "Microsoft YaHei"; font-size: 16px;"> height: 640px;</span></p><p style="margin: 10px auto; padding: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; white-space: normal; "><span style="margin: 0px; padding: 0px; font-family: "Microsoft YaHei"; font-size: 16px;">}</span></p><p style="margin: 10px auto; padding: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; white-space: normal; "><span style="margin: 0px; padding: 0px; font-family: "Microsoft YaHei"; font-size: 16px;">引入后：除以100并将px换成rem</span></p><p style="margin: 10px auto; padding: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; white-space: normal; "><span style="margin: 0px; padding: 0px; font-family: "Microsoft YaHei"; font-size: 16px;">body {</span></p><p style="margin: 10px auto; padding: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; white-space: normal; "><span style="margin: 0px; padding: 0px; font-family: "Microsoft YaHei"; font-size: 16px;"> width: 7.5rem;</span></p><p style="margin: 10px auto; padding: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; white-space: normal; "><span style="margin: 0px; padding: 0px; font-family: "Microsoft YaHei"; font-size: 16px;"> height: 6.4rem;</span></p><p style="margin: 10px auto; padding: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; white-space: normal; "><span style="margin: 0px; padding: 0px; font-family: "Microsoft YaHei"; font-size: 16px;">}</span></p><p style="margin: 10px auto; padding: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; white-space: normal; "><span style="margin: 0px; padding: 0px; font-family: "Microsoft YaHei"; font-size: 16px;">换算的依据：</span></p><p style="margin: 10px auto; padding: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; white-space: normal; "><span style="margin: 0px; padding: 0px; font-family: "Microsoft YaHei"; font-size: 16px;"></span></p><pre style="background-color:#262e37;color:#ffffff;font-family:'Consolas';font-size:11.3pt;"><span style="color:#5b7773;background-color:#191f26;">// </span><span style="color:#5b7773;background-color:#191f26;font-family:'宋体';">乘以</span><span style="color:#5b7773;background-color:#191f26;">100</span><span style="color:#5b7773;background-color:#191f26;font-family:'宋体';">，</span><span style="color:#5b7773;background-color:#191f26;">px : rem = 100 : 1</span><span style="color:#5b7773;"><br/></span><span style="color:#f92672;">var </span><span style="font-style:italic;">recalc </span><span style="color:#f92672;">= function</span>() {<br/> <span style="color:#f92672;">var </span><span style="color:#64a2a2;">width </span><span style="color:#f92672;">= </span>docEl.<span style="color:#660e7a;font-weight:bold;">clientWidth</span>;<br/> <span style="color:#f92672;">if </span>(<span style="color:#64a2a2;">width </span><span style="color:#f92672;">/ </span><span style="color:#660e7a;font-weight:bold;">dpr </span><span style="color:#f92672;">> </span><span style="color:#ae81ff;">750</span>) {<br/> <span style="color:#64a2a2;">width </span><span style="color:#f92672;">= </span><span style="color:#ae81ff;">750 </span><span style="color:#f92672;">* </span><span style="color:#660e7a;font-weight:bold;">dpr</span>;<br/> }<br/> <span style="color:#5b7773;background-color:#191f26;">// </span><span style="color:#5b7773;background-color:#191f26;font-family:'宋体';">乘以</span><span style="color:#5b7773;background-color:#191f26;">100</span><span style="color:#5b7773;background-color:#191f26;font-family:'宋体';">，</span><span style="color:#5b7773;background-color:#191f26;">px : rem = 100 : 1</span><span style="color:#5b7773;"><br/></span><span style="color:#5b7773;"> </span>docEl.<span style="color:#660e7a;font-weight:bold;">style</span>.<span style="color:#660e7a;font-weight:bold;">fontSize </span><span style="color:#f92672;">= </span><span style="color:#ae81ff;">100 </span><span style="color:#f92672;">* </span>(<span style="color:#64a2a2;">width </span><span style="color:#f92672;">/ </span><span style="color:#ae81ff;">750</span>) <span style="color:#f92672;">+ </span><span style="color:#e6db74;">'px'</span>;<br/>};</pre><div class="cnblogs_code" style="margin: 5px 0px; padding: 5px; background-color: rgb(245, 245, 245); border: 1px solid rgb(204, 204, 204); overflow: auto; white-space: normal; font-family: "Courier New" !important; font-size: 12px !important;"><div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"><span style="font-family: sans-serif; font-size: 14px;">来源：</span><a href="https://www.cnblogs.com/haishen/p/10884679.html" style="font-family: sans-serif; font-size: 14px;">https://www.cnblogs.com/haishen/p/10884679.html</a><br/></div></div>
相关文章
