rem适配

1
2
设置完美视口
<meta name="viewport" content="width=device-width,initial-scale=1.0">

设备对立像素：布局视口 = 1：1

方案一

先按照 IPhone 6 进行页面布局，再进行适配

  1. 完美视口设置
  2. 设计稿总宽 375 布局
  3. 设置 font-size 100px 尺寸转为 rem
  4. 增加 JS 代码进行页面适配
1
2
3
4
html,body{ 
  /*设置根字体大小*/
  font-size = 37.5px;
}

以iphone 6为例，设备独立像素是 375px

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
  	html,body{ 
    /*设置根字体大小*/
    font-size = 100px;
    }
    #demo{
      width: 345px;
      height: 150px;
      bg: #000;
    }
  </style>
<body>
	<div id="demo">
    
  </div>
</body>
</html>

1rem = 根字体大小 = 100px
那么设计稿以iphone6设置的宽度是345px，左右15px，居上15px，都需要去适配
345px => 3.45rem => (设计稿/根字体)
15px  => 0.15rem
根字体计算：（手机横向设备独立像素值 * 100) / 设计稿宽度
一般设计师设计稿都是以iphone6为例

宽度3.45rem是相对根字体的，当设备是iphone6-plus
像素值：3.45rem * 当前根字体 3.45 * 110.4 = 380.88px
345px => 380.88px 从iphone6变化到iphone6plus，这样就完成了适配
1
2
3
4
5
6
7
8
9
10
11
function adapter(){
  // 获取布局视口宽度,因为开启了理想视口,布局视口=设备横向独立像素值
  const dpWidth = document.documentElement.clientWidth
  // 计算根字体大小
  const rootFontSize = (dpWidth * 100) / 375
  // 设置根字体大小
  document.documentElement.style.fontSize = rootFontSize + 'px'
}
adapter()
// 当设备布局视口改变时,就回调一下函数
window.onresize = adapter

方案二

1
2
3
4
5
6
7
方案二的跟字体比较好算
根字体: 设备独立像素值 / 10
iphone6 : 37.5px
pphone6plus : 41.4px
宽度 345px => 345/(375/10) = 9.2rem
可以轻易得出根字体大小,但是宽度等值,每次都需要计算
此时,我们就需要利用less,来帮助程序猿计算
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// less 语言
#demo{
	width: 345/(375/10)rem
}

// css 语言
#demo{
	width: 9.2 rem
}

计算后的确是9.2,但是不生效,因为单位rem前面会有空格,原因是我们在less上用了括号,此时我们要利用less 的变量
且变量就带上单位
@fontSize: 375/10rem
#demo{
	width: 345/@fontSize;
}
这样就完美适配了
#demo{
	width: 9.2rem
}

vw适配

完美接近于rem适配,但是兼容性极差

https://caniuse.com/ 通过这个网站可以查询一下,很多浏览器不支持vw

了解vw适配如何使用

1
2
3
4
5
6
vw全称viewportwidth,就是布局视口的宽度,也就是设备横向独立像素值
iphone6 375px iphone6plus 414px
设计宽度 345px,高度150px ,边距15px 上边距15px
==> 345px/375px*100vw = 92vw
==> 150px/375px*100vw = 40vw
这样适配,也能和rem适配媲美,但是兼容差

边框border

1
2
3
关于物理像素,当你手机的dpi是1,那么border:1px;物理像素也是1px
如果dpi是2 => 物理像素 2px
因此如何让物理像素值一直保存1px
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#demo{
	width: 150px;
  height: 150px;
  border: 1px solid #000;
}
// 使用媒体media
@media screen and (-webkit-min-device-pixel-ratio:2){
	#demo{
  	border: 0.5px solid #000;
	}
}
@media screen and (-webkit-min-device-pixel-ratio:3){
	#demo{
  	border: 0.333px solid #000;
	}
}

关于物理像素的边框1px 作为一个了解

大厂设置的网站,如淘宝和京东,就会回避边框,不使用它

移动端事件