1、移动端系统包括：
// Ios、android、windows phone、black berry
2、移动端的浏览器
// safari、chrome、firefox
3、屏幕尺寸：
1、像素 设备像素 pt(物理像素/尺寸、分辨率)、 css像素px(视觉像素/尺寸)
2、屏幕尺寸 （对角线指的是xxx英寸） 3、PPI，像素密度
// 同一区域，发光点越多，屏幕分辨率越高越清晰
4、像素比(DPR)
// 通常iphone6 1334x750指代的是屏幕宽高的发光点数
一、移动端适配vw/vh + rem
// div在大屏下大一点，在小屏里小一些 // vw+rem就能做到你说的 // vw 把屏幕（用户的手机）宽度分成100份，天生就是用来做适配 // rem html的font-size值，这个东西能当作尺寸来用 // 通过vw设置一个html的font-size，然后页面里所有的元素需要使用尺寸就都用rem // font-size:?vw; // 150px用vw来表示，是多少？ // 150/(750/100)=20vw // 求font-size的vw值 // width: ?rem; // width: 1.5rem; 为什么要给一个1.5rem，是为了你从设计搞里量出一个值后直接除100结果就是rem的值，是为了方便计算！！！！！！！！！ // 1.5rem => 20vw 1.5*?rem=20vw => ?=20vw/1.5 => 13.333333333333334vw
来看代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<title></title>
<style>
html {
/* 元素的实际宽度 = 根节点中fontsize的大小 * rem */
font-size: 20px;
}
body {
margin: 0;
}
div {
width: 1.5rem;
height: 2rem;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div></div>
</body>
<html>
通过上面代码来计算1个rem宽度等于多少vm宽度？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<title></title>
<style>
html {
/* 元素的实际宽度 = 根节点中fontsize的大小 * rem */
font-size: 13.333333333333334vw;
}
body {
margin: 0;
}
div {
/* 假设 iphone6设计稿中某个元素宽为150px,高为200px。如何计算单位尺寸？ */
/* 设计稿宽度 750px (750占了100个vw,可以得出1个vw占了7.5px)
元素宽度 150px (150px除以7.5px = 20vw)
弊端：换算起来比较麻烦
优化：
设计稿宽度 750px, 转换成rem为：750px/100 = 7.5rem
元素尺寸为150px, 换算成rem为：150px/100 = 1.5rem
综上可得：7.5rem等于100vw，1.5rem等于20vw
求1个rem的宽度为多少vw？
100vw/7.5rem = 13.333333vw
20vw/1.5rem = 13.333333vw
*/
width: 1.5rem;
height: 2rem;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div></div>
</body>
<html>