手机移动端web网站或app用rem定义宽高技巧

发布时间:2016-06-16 17:30 | 人气数:477

网页的全部 *文本* 都用 em/rem 来设置大小呢,有了这个 base 变量,就可以只修改一个值,来改变所有文字的大小了。因为它们都是 base 的倍数。就像浏览器提供的页面缩放功能那样,不过这里是只缩放文本。再结合 media query在html定义字体大小,即1rem的px大小,就可以控制不同屏幕上有不同的字号了。

@media only screen { html { font-size: 30px; } }
@media only screen and (max-width: 479px) { html { font-size: 15px; } }
@media only screen and (max-width: 320px) { html { font-size: 13px; } }

以下用100vw即不用上面的media代码定义,直接读取屏幕宽度。假设设计师的视觉稿是按照iPhone6的宽度来设计的,即375px (如果是高清的视觉稿750/2=375)那么,我们可以完全按照视觉稿上的尺寸来赋值给元素的样式,比如视觉稿上的尺寸是80px,那么在css中就可以直接定义width:80px; 页面中所有的尺寸都这样来设置。

当所有的网站所有的页面样式都设置好之后。

我们需要做两件事情:

1. 设置页面css的rem大小

html {
font-size: calc(100vw/3.75);/*1rem不能小于12px,故设置1em默认为100px*/
}
100vw是设备的宽度,除以3.75可以让1rem的大小在iPhone6下等于100px。

2. 替换页面中的单位,把所有的px单位替换成rem,除以100,比如前面的80px,就是0.8rem。

这样在iPhone6下,所有元素的尺寸还是和视觉稿的尺寸一样,而iphone5中,因为设备的宽度变小了,100vw/3.75得到的值,会相应的变小,即rem的单位值会变小,页面中所有的尺寸会等比例缩放。这样就可以做到针对任何分辨率的设备保持视觉一致了。

最后,前面用到vw单位,但是低版本的设备可能不支持,那么就需要js来处理一下:
document.documentElement.style.fontSize = window.innerWidth/3.75 + 'px'
也可以不用JS做适配,用CSS适配一样(注意禁止缩放/放大):
@media only screen and (max-width: 320px){html{font-size: 9px;} }
@media only screen and (min-width: 320px) and (max-width: 352px){html{font-size: 10px;} }
@media only screen and (min-width: 352px) and (max-width: 384px){html{font-size: 11px;} }
@media only screen and (min-width: 384px) and (max-width: 416px){html{font-size: 12px;} }
@media only screen and (min-width: 416px) and (max-width: 448px){html{font-size: 13px;} }
@media only screen and (min-width: 448px) and (max-width: 480px){html{font-size: 14px;} }
@media only screen and (min-width: 480px) and (max-width: 512px){html{font-size: 15px;} }
@media only screen and (min-width: 512px) and (max-width: 544px){html{font-size: 16px;} }
@media only screen and (min-width: 544px) and (max-width: 576px){html{font-size: 17px;} }
@media only screen and (min-width: 576px) and (max-width: 608px){html{font-size: 18px;} }
@media only screen and (min-width: 608px) and (max-width: 640px){html{font-size: 19px;} }
@media only screen and (min-width: 640px){html{font-size: 20px;} }
之所以前面让1rem等于100px,而不是1rem等于1px,是因为在chrome下针对中文的最小字体是12px。

当然,这种步骤是针对现在的状况改rem来做的,如果一开始就是使用rem,那么写css的时候,可以直接写rem单位,按视觉稿除以100,其实也没有什么计算过程。或者用预处理器的话,也可以写一个`px2rem`的函数,直接改这个函数就可以了。

JS全适配代码例如:
(function(doc, win) {
var docEl = doc.documentElement,
isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1,
dpr = window.top === window.self ? dpr : 1, //被iframe引用时,禁止缩放
resizeEvt = ‘orientationchange’ in window ? ‘orientationchange’ : ‘resize’;
docEl.dataset.dpr = dpr;
var recalc = function() {
var width = docEl.clientWidth;
if (width / dpr > 1080) {
width = 1080 * dpr;
}
docEl.dataset.width = width
docEl.dataset.percent = 100 * (width / 1080);
docEl.style.fontSize = 100 * (width / 1080) + ‘px’;
};
recalc()
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
})(document, window);
手机端适应的JS:
!(function (doc, win) {
            var docEle = doc.documentElement,
                    evt = "onorientationchange" in window ? "orientationchange" : "resize",
                    fn = function () {
                        var width = docEle.clientWidth;
                        width && (docEle.style.fontSize = 20 * (width / 320) + "px");
                    };
            win.addEventListener(evt, fn, false);
            doc.addEventListener("DOMContentLoaded", fn, false);
        }(document, window));

关键词:rem, web网站, 手机网页