遇到的问题:如何适配不同的手机屏幕。
简单的说media query可以解决一部分。但是media query目前是照着iphone5/iphone/iphone6s 三个不同尺寸来进行。
如果手机尺寸不在这三个范围之内,那么元素的宽度可以按照百分比来处理,但是高度就不行了。
比如就会出现在轮播图的情况下,原来的高度是写死如iphone5 200px;iphone6 250px;iphone 6s 300px;
如果手机不在这三个尺寸的范围内就会出现轮播图失真的情况。
于是对于所有的不同尺寸屏幕会有不同的宽度、高度和字体的页面元素,都使用rem的方式来处理。
什么是rem
rem是一个相对页面根元素,也就是html元素的font-size 大小来声明的一个值。详细的百度吧,不做重复工作。
比如我在html中定义
font-size:10px;
在一个body下定义一个div的样式
{height:2rem;width:4rem;font-size:1.2rem}
那么实际效果就是
{height:20px;width:40px;font-size:12px}
怎么去做多屏幕适配
把屏幕尺寸的宽度设置成当前屏幕宽度/10;
比如iphone5 就设置html{font-size:32px} 200px 高度就变成了 height:6.25rem
具体实现如下(参考代码中的common.js和style.css)
html{
font-size: 32px;
width: 100%;
height: 100%;
}
@media only screen and (min-width: 375px){
html {
font-size: 37.5px;
}
}
@media only screen and (min-width: 414px){
html {
font-size: 41.4px;
}
}
body{
font-size: 12px;/*记得要把body font-size默认值设回来 不然就默认字体就变成32px啦*/
}
//重新计算html的字体大小保证使用rem进行设置高宽
var basefontsize =window.screen.width/10+"px";
if($("html").css("font-size")!=basefontsize){
$("html").css("font-size",basefontsize);
}
关于字体
所有字体如果不随屏幕大小变化情设置成指定的px
引申出来的百分比布局
比如要做一个1:4的纵向布局。第一个div宽度设置成2rem 第二个设置成8rem 这样总共宽度加起来就是10rem=320px(iphone下),刚好就是1:4的布局有木有很简单
这样就可以愉快的使用rem来设置元素的宽和高来保证不通屏幕的适配了