以前写移动端都是用这段JS解决.
(function (doc, win) {
// 分辨率Resolution适配
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if (clientWidth >= 750) {
docEl.style.fontSize = 100 + 'px';
}else{docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';}
}
// Abort if browser does not support addEventListener
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
recalc();
})(document, window);
JS中设计稿的大小可以随便改,我这里用的设计稿都是750的,将750尺寸下,根元素font-size大小设置成100px,用这个JS可以实现页面随根元素的font-size大小而改变,也就是rem写法.当设计稿中元素大小为100px时候,只要在css中设置成1rem就可以.计算很方便,这样写确实简单.
但这个JS有一些很难受的弊端,其一在现在iphone和其它手机中,dpr值都为2或者3,这样会出现移动端1px这个不是1px的难题,会是2px 3px的大小.这样会导致给一个文字加边框文字会塌下去的问题.
字体大小在dpr=2的iphone设备只能设置到24px,原理如下375*24/750=12,浏览器最小设置字体大小为12.ipone5的真实大小是375pt.也就是真实设计稿750px的一半大.
dpr=3的设备也只能设置到12*750/414=21.74px.所以弊端不少.ipone6plus的真实大小是414pt.
不懂 dpr pt px的可以去网上问问,理解就可以.
前段时间看到网上有个hotcss解决方案,我研究了一下代码.代码如下(做了简单的修改,原因下文中有):
(function( window , document ){
'use strict';
//给hotcss开辟个命名空间，别问我为什么，我要给你准备你会用到的方法，免得用到的时候还要自己写。
var hotcss = {};
(function() {
//根据devicePixelRatio自定计算scale
//可以有效解决移动端1px这个世纪难题。
var viewportEl = document.querySelector('meta[name="viewport"]'),
hotcssEl = document.querySelector('meta[name="hotcss"]'),
dpr = window.devicePixelRatio || 1,
maxWidth = 750,//最大显示尺寸
designWidth = 0;
dpr = dpr >= 3 ? 3 : ( dpr >=2 ? 2 : 1 );
//允许通过自定义name为hotcss的meta头，通过initial-dpr来强制定义页面缩放
if (hotcssEl) {
var hotcssCon = hotcssEl.getAttribute('content');
if (hotcssCon) {
var initialDprMatch = hotcssCon.match(/initial\-dpr=([\d\.]+)/);
if (initialDprMatch) {
dpr = parseFloat(initialDprMatch[1]);
}
var maxWidthMatch = hotcssCon.match(/max\-width=([\d\.]+)/);
if (maxWidthMatch) {
maxWidth = parseFloat(maxWidthMatch[1]);
}
var designWidthMatch = hotcssCon.match(/design\-width=([\d\.]+)/);
if (designWidthMatch) {
designWidth = parseFloat(designWidthMatch[1]);
}
}
}
document.documentElement.setAttribute('data-dpr', dpr);
hotcss.dpr = dpr;
document.documentElement.setAttribute('max-width', maxWidth);
hotcss.maxWidth = maxWidth;
if( designWidth ){
document.documentElement.setAttribute('design-width', designWidth);
hotcss.designWidth = designWidth;
}
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.px2rem = function( px , designWidth ){
//预判你将会在JS中用到尺寸，特提供一个方法助你在JS中将px转为rem。就是这么贴心。
if( !designWidth ){
//如果你在JS中大量用到此方法，建议直接定义 hotcss.designWidth 来定义设计图尺寸;
//否则可以在第二个参数告诉我你的设计图是多大。
designWidth = parseInt(hotcss.designWidth , 10);
}
return parseInt(px,10)*750/designWidth/100;
}
hotcss.rem2px = function( rem , designWidth ){
//新增一个rem2px的方法。用法和px2rem一致。
if( !designWidth ){
designWidth = parseInt(hotcss.designWidth , 10);
}
//rem可能为小数，这里不再做处理了
return rem*100*designWidth/750;
}
hotcss.mresize = function(){
//对，这个就是核心方法了，给HTML设置font-size。
var innerWidth = document.documentElement.getBoundingClientRect().width || window.innerWidth;
if( hotcss.maxWidth && (innerWidth/hotcss.dpr > hotcss.maxWidth) ){
innerWidth = hotcss.maxWidth*hotcss.dpr;
}
if( !innerWidth ){ return false;}
document.documentElement.style.fontSize = ( innerWidth*100/750 ) + 'px';//设计尺寸750 根元素为100px 便于计算
hotcss.callback && hotcss.callback();
};
hotcss.mresize();
//直接调用一次
window.addEventListener( 'resize' , function(){
clearTimeout( hotcss.tid );
hotcss.tid = setTimeout( hotcss.mresize , 33 );
} , false );
//绑定resize的时候调用
window.addEventListener( 'load' , hotcss.mresize , false );
//防止不明原因的bug。load之后再调用一次。
setTimeout(function(){
hotcss.mresize();
//防止某些机型怪异现象，异步再调用一次
},333)
window.hotcss = hotcss;
//命名空间暴露给你，控制权交给你，想怎么调怎么调。
})( window , document );
这样写出来的方案就考虑到了dpr值的影响,以上问题都可以解决掉,他们的CSS是用sass实时去编译计算的,
宽高这么写width:px2rem(182);height:px2rem(53);
下边这个函数就是用来解决这个算法的.
@function px2rem( $px ){
@return $px*320/$designWidth/20 + rem;
}
他的JS我稍微做了修改,因为老去写px2rem()这个方法烦的很,所以我把里边计算根元素字体大小这句改成如下
document.documentElement.style.fontSize = ( innerWidth*100/750 ) + 'px';//设计尺寸750 根元素为100px 便于计算
我的设计稿一直都是750px,在这个尺寸下我将根元素字体大小设置成100px,这样我设计稿上的元素高是98px的时候,我直接设置成0.98rem;这样简单的计算一下,速度很快,也不会去写px2rem()这个方法;
如果写个简单活动页面,也可以不用sass 老去监听编译,测试也麻烦.直接口算简单易用.
如果你的设计稿是720,这句话应该为
document.documentElement.style.fontSize = ( innerWidth*100/720 ) + 'px';
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
