84669 orang belajar
152542 orang belajar
20005 orang belajar
5487 orang belajar
7821 orang belajar
359900 orang belajar
3350 orang belajar
180660 orang belajar
48569 orang belajar
18603 orang belajar
40936 orang belajar
1549 orang belajar
1183 orang belajar
32909 orang belajar
刚开始做移动端有点问题! 用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就是移动端的单位