本文共 1473 字,大约阅读时间需要 4 分钟。
整理代码的时候发现以前公司内部分享写的ppt
题记:html的font-size:num rem 可以等比改变所有以 rem 为单位的元素
1.以rem 为单位,前端切图,以640尺寸(保证放大的图片质量), width,height,padding,marging 等切距离,以320的尺寸,也可以以640的尺寸。 配合以下媒体查询 html { font-size: 62.5%;/* 10÷16=62.5% */ } @media only screen and (min-width: 481px) { html { font-size: 94% !important;/* 10(480÷320)÷16=94% */ } } @media only screen and (min-width: 561px) { html { font-size: 109% !important;/* 10(560÷320)÷16=109% */ } } @media only screen and (min-width: 641px) { html { font-size: 125% !important;/* 10(640÷320)÷16=125% */ } body { max-width: 640px; } } 比如说320的设计稿,切 marging-top:10px; CSS 中 则写 marging-top:1rem; 也可以用640的设计稿切距离,记得除以2, 比如640 切出margin-top:20px;font-size:24px;CSS中则写 margin-top:1rem ;font-size: 1.2rem; 那实际浏览换算如下 320 中:1rem*62.5%*16px=10px;1.2rem*62.5%*16=12px; 560 中:1rem*109%*16px=17.44px;1.2rem*109%*16=20.928px; 640 中:1rem*125%*16px=20x;1.2rem*125%*16=24px; 1.不使用媒体查询,动态的改变以rem为单位元素大小,切图切距离以640的尺寸 <script> (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; if(clientWidth>=640){ docEl.style.fontSize = '100px'; }else{ docEl.style.fontSize = 50 * (clientWidth / 320) + 'px';// 用边缘值代入 50*(640/320)px=100px; } }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window); </script>