当前位置： 移动技术网 > IT编程>网页制作>CSS > WEB端自适应尺寸的方法

WEB端自适应尺寸的方法

2018年11月25日  | 移动技术网IT编程  | 我要评论
web端自适应尺寸的方法

移动端页面开发通常用的是rem单位来做不同分辨率屏幕的自适应，那我们怎么从ui设计稿的px像素单位自动转换到rem呢?

我们写了一个方法来解决，只要输入设计稿的元素尺寸，就可以自动转换过来。

//宽度基准

!(function(win, doc) {

function setfontsize() {

var docel = doc.documentelement;

var winwidth = docel.clientwidth;

doc.documentelement.style.fontsize = (winwidth / 1080) * 100 + 'px';

}

var evt = 'onorientationchange' in win 'orientationchange' : 'resize';

var timer = null;

win.addeventlistener(evt, function() {

cleartimeout(timer);

timer = settimeout(setfontsize, 300);

}, false);

win.addeventlistener('pageshow', function(e) {

if (e.persisted) {

cleartimeout(timer);

timer = settimeout(setfontsize, 300);

}

}, false)

setfontsize();

}(window, document))

上述代码中的1080就是你设计稿设计的尺寸，根据不用的尺寸来填写，然后调用这个方法后，你页面所有的元素单位就会转换为rem，在页面具体中的用法就是，比如你设计稿的文字大小为12px,那么你在页面样式代码中就要写成0.12rem，以此类推，页面代码中的尺寸就是你设计稿中的原始尺寸除以100。

希望对你们有帮助。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网