刚开始做移动端有点问题! 用JS动态计算html的fant-size 可一适配,但是元素的字体怎么设置,用也rem?还是用px? 我用的是px+媒体查询做的适配,但不知道要适配的屏幕有多少种?麻烦解答下!!! 补充一下 (元素的字体是rem还是px 适配多少种)
小伙看你根骨奇佳,潜力无限,来学PHP伐。
!function(a,b){var c=a.documentElement,d="orientationchange"in window?"orientationchange":"resize",e=function(){var a=c.clientWidth;a&&(c.style.fontSize=100*(a/750)+"px")};a.addEventListener&&(b.addEventListener(d,e,!1),a.addEventListener("DOMContentLoaded",e,!1))}(document,window);
得用媒体查询再单独设置 不然字体会很难看可以随便扒个购物站的移动版来看看 里面已经写好很多东西
(function (psdWidth){ var r = document.documentElement; var w = r.clientWidth; r.style.fontSize = (w > 720 ? 720 : w < 320 ? 320 : w) / psdWidth * 100 + "px";})(640);
我一直用的是这个。页面里按 1rem = 100px(设计稿里的尺寸)来换算。最好在页面样式表加载之前运行,否则先加载css再重算尺寸,页面会闪一下。
js://px转换为rem的JS
function change() { document.documentElement.style.fontSize = 20 * document.documentElement.clientWidth / 375 + 'px'; } document.addEventListener('DOMContentLoaded', change, false); window.addEventListener('resize', change, false);
解释:我公司的设计图是750的,我在html中设置font-size:20px;然后拿到设计稿中的px尺寸除以40再加上rem就是移动端的单位
得用媒体查询再单独设置 不然字体会很难看
可以随便扒个购物站的移动版来看看 里面已经写好很多东西
(function (psdWidth){
var r = document.documentElement;
var w = r.clientWidth;
r.style.fontSize = (w > 720 ? 720 : w < 320 ? 320 : w) / psdWidth * 100 + "px";
})(640);
我一直用的是这个。
页面里按 1rem = 100px(设计稿里的尺寸)来换算。
最好在页面样式表加载之前运行,否则先加载css再重算尺寸,页面会闪一下。
js:
//px转换为rem的JS
解释:我公司的设计图是750的,我在html中设置font-size:20px;
然后拿到设计稿中的px尺寸除以40再加上rem就是移动端的单位