移动端适配,是一个老生常谈的问题了,具体的知识点和理论知识,我也就不说了,大家可以参考下面这篇文章
下面用到的名词 rem
vw
less
设备独立像素
等等 都在这两篇文章里
rem适配
记住一句话:rem是html标签的字体大小,即:1rem=html.style.fontSize
我们先以iphone6/7/8为基础适配其他的屏幕
以iphone6/7/8为例 ,设备宽度为 375px(设备独立像素,即css像素)
1.建立如下目录
2.动态计算rem的
在home.html
引入less.js
和home.less
,在head
标签动态计算rem,代码如下
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="format-detection" content="telephone=no" >
<link rel="stylesheet/less" href="css/home.less" />
<title>首页</title>
<script >
//立即执行函数
()(function(){
//动态计算rem,以屏幕宽度375px为例
function resetRem(){
//1.获取html标签
var html=document.body||document.documentElement;
//2.获取html标签的宽度,并限制最大宽度
var htmlWidth=html.getBoundingClientRect().width;
if(htmlWidth>768){
htmlWidth=768
}
//3.动态计算rem,将屏幕宽度分成15份(20份、25份、30份都行,整数好计算),每一份的大小就是1rem
html.style.fontSize = htmlWidth / 15 + "px"; //此时为1rem=25px=html.style.fontSize
}
//4.页面加载时调用
resetRem();
//5.页面尺寸发生变化时再调用一下
window.onresize=function(){
resetRem();
}
})
</script>
</head>
<body>
<div class="box">
测试用的box
</div>
<script src="js/less.js"></script>
</body>
</html>
3.使用less.js将px转为rem
前面将屏幕分成15份经算出 1rem=25px
所以我们在home.less
中定义变量@r:25rem
注意,如果不是分成15份,比如分成20份,那么1rem=375/20=18.5px,则变量@r:18.5rem,;如果分成25份,那么1rem=375/25=15px,则变量
@r:15rem
然后设置.box
样式,宽高为200px和300px
200/25rem=8rem
300/25rem=10rem
将宽高除以变量@r
,就可以得到以rem为单位的大小
@r:25rem;
.box {
width: 200/@r; //8rem
height: 300/@r; //12rem
background-color: red;
}
前面说到 当前1rem=25px
是在屏幕尺寸为375px
下计算的
即1rem=html.style.fontSize=当前屏幕宽度/份数
//3.动态计算rem,将屏幕宽度分成15份(20份、25份、30份都行,整数好计算),每一份的大小就是1rem
html.style.fontSize = htmlWidth / 15 + "px"; //此时为1rem=25px=html.style.fontSize
所以每当屏幕发生宽度发生变化时(用户手机类型不同时)
就会重新计算rem,这样我们得到的rem值就是根据当前屏幕宽度动态计算的,这样可以适配多种手机屏幕
4.浏览器打开查看样式
iphone6/7/8下的样式
iphone6/7/8 plus下的样式
三星s5下的样式
可以看出,在不同屏幕下,width
和height
都是8rem
和10rem
,至于别的属性的设置,如字体、边距、定位等等,只要知道px的大小,按照width
和height
的设置方式即可,
vw适配
还以iphone6/7/8为例 ,设备宽度为 375px(设备独立像素,即css像素)
记住:100vw
=当前屏幕宽度
=375px
所以:1vw
=3.75px=1%*当前屏幕宽度
1. 使用less.js将px转换vw
在home.less
中定义一个变量@v=3.75vw
然后设置.box
样式,宽高都是300px
将宽高除以变量@v
,就可以得到以vw为单位的打大小
@v: 3.75vw;
.box {
width: 300/@v;
height: 300/@v;
background-color: blue;
}
2.浏览器打开查看样式
iphone6/7/8下的样式
iphone6/7/8 plus下的样式
三星s5下的样式
可以看出 可以看出,在不同屏幕下,width
和height
都是80vw
,而1vw=1%*当前屏幕宽度
,所以在任何手机上都能适配
总结
rem适配
- 优点:兼容性好
- 缺点:需要js进行动态计算,相对繁琐
vw适配
- 优点:设置超级简单,结合less/sass一个变量即可
- 缺点:兼容性低(貌似现在的手机都能兼容了吧)
建议
适配没有银弹,没有最优解,以上只是最简单的适配方法,另外我也是一个菜鸟,搬砖的