手机页面设计稿一般是640px,但是,手机屏幕大小确是不确定的,想做出适应所有手机的手机页面解决方案有两种,rem布局和百分比布局。
这里介绍用rem布局来制作手机页面:
rem
是css3中新增加的一个单位值,他和em
单位一样,都是一个相对单位。不同的是em
是相对于元素的父元素的font-size
进行计算;rem
是相对于根元素html
的font-size
进行计算。
原理:首先根据设计稿的宽度和默认的字体大小(一般是100px)计算出一个比例rem,
然后用js根据默认最大屏幕宽度(一般是640px)和当前设备宽度算出需要缩放的倍数,根据这个倍数值改变html默认的字体大小。
例:
设默认最大屏幕宽度(最大屏宽)为640px, 默认字体大小(默认fz)为100px, 设默认设计稿宽(默认物宽)为106px
则:rem=默认物宽/默认fz=106/100=1.06rem
设当前屏宽320px, 当前设计稿宽(当前物宽)为x, 当前字体大小(当前fz)为y
则:默认物宽/默认fz==当前物宽/当前fz=x/y=1.06rem ,
最大屏宽/当前屏宽=默认物宽/当前物)=640/320=106/x
解:y=(106*320)/(640*1.06rem)=(100*320)/640=50 , 即 当前fz=(默认fz*当前屏宽)/默认屏宽
js代码:
<script type="text/javascript">
new function (){
var _self = this;
var deviceWidth=screen.width; //设备宽度
_self.width = 640; //设置默认最大宽度
_self.fontSize = 100; //默认字体大小
//如果当前设备宽度大于默认最大宽度,则返回默认最大宽度
_self.actualWidth = function(){
if(_self.width<deviceWidth){return _self.width;}
else{return deviceWidth;}
};
//根据计算公式改变html默认字体大小
document.getElementsByTagName("html")[0].setAttribute("style","font-size:"+(_self.actualWidth()*_self.fontSize)/ _self.width+"px !important");
};
</script>
sass中rem的使用:
在CSS中,实现px
和rem
转换非常简单,但每次使用都需进行计算,所以接下来介绍如何使用Sass实现px
和rem
之间的计算。
首先声明变量: $browser-default-font-size: 100px !default;
然后在html
根元素中显示的声明font-size
:html { font-size: $browser-default-font-size; }
接着然后通过@function
来实现px
转为rem
计算:
@function rem($px) {
@return $px / $browser-default-font-size * 1rem;
}
在需要转换时调用函数:height: rem(106px);