移动端开发-rem

对于手机开发,适配是一个非常麻烦的事情,大家一般都是是呀百分百或者缩放来做,但是这种方法还是会导致实际效果跟设计稿差别很大。
借鉴腾讯的做法,使用先计算当前尺寸对应设计稿的1像素比例,在rem来写尺寸大小。这个方法个人到现在发现是最好的一种
只需要按照图片或者容器在设计稿的尺寸来写,就能很完美的呈现
1、在head标签里引入下面代码
[code lang=”js” type=”js”]
//全局字体rem
(function(window, document, widSize) {
‘use strict’;
var hotcss = {};
(function() {
var viewportEl = document.querySelector(‘meta[name="viewport"]’),
dpr = window.devicePixelRatio || 1,
maxWidth = 540;

dpr = dpr >= 3 ? 3 : ( dpr >=2 ? 2 : 1 );

document.documentElement.setAttribute(‘data-dpr’, dpr);
hotcss.dpr = dpr;

document.documentElement.setAttribute(‘max-width’, maxWidth);
hotcss.maxWidth = maxWidth;

var scale = 1 / dpr,
content = ‘width=device-width, initial-scale=’ + scale + ‘, minimum-scale=’ + scale + ‘, maximum-scale=’ + scale + ‘, user-scalable=no’;

if (viewportEl) {
viewportEl.setAttribute(‘content’, content);
} else {
viewportEl = document.createElement(‘meta’);
viewportEl.setAttribute(‘name’, ‘viewport’);
viewportEl.setAttribute(‘content’, content);
document.head.appendChild(viewportEl);
}

})();
hotcss.mresize = function() {
//var innerWidth = document.documentElement.getBoundingClientRect().width || window.innerWidth;
var clientWidth = document.documentElement.clientWidth,
clientHeight = document.documentElement.clientHeight;

//横屏
clientWidth = (clientWidth>clientHeight)? clientHeight: clientWidth;
console.log(clientWidth);
////优化pc和平板体验
if (hotcss.maxWidth && (clientWidth / hotcss.dpr > hotcss.maxWidth)) {
clientWidth = hotcss.maxWidth * hotcss.dpr;
}
console.log(clientWidth);

var htmlSize = clientWidth / widSize * 100;
htmlSize = htmlSize < 50 ? 50 : htmlSize;
document.documentElement.style.fontSize = htmlSize + ‘px’;
};

setTimeout(function() {
hotcss.mresize();
//防止某些机型怪异现象,异步再调用一次
}, 333);
//绑定resize的时候调用
hotcss.mresize();

})(window, document, 750);
[/code]
2、在css填写容器宽高时,(假设设计尺寸宽是640)直接填写图片或者设计的 尺寸值/100 + rem。(eg:图片尺寸200x100px,可以直接写width:2rem;height:1rem;)
这种方式 在不同手机下显示尺寸都是跟设计稿完美对应的,唯一需要修改的就是高度不一样,元素之间的间隔需要做修改
3、高度不一样,调整间隙可以使用媒体查询配合

发表评论

邮箱地址不会被公开。 必填项已用*标注