移动端响应式布局（媒体查询+rem,vw+rem,flexible.js+rem）

一、媒体查询

1.主要作用

检测设备大小是否发生改变，可以实现响应式布局。

2.响应式布局

会根据设备的大小显示出不同的布局效果，在大设备和小设备上显示的布局可能是不一样的。

要想知道设备大小的改变，需要借助于媒体查询去实现。

3.语法

@media all and (检测的条件){

/* 满足这个条件所呈现的布局效果 */

}

媒体查询检测设备大小的时候一般只检测宽度即可。

4.示例

<!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><style>@media all and (min-width:1024px){body{background-color: red;}}@media all and (min-width:768px) and (max-width:1023px){body{background-color: yellow;}}@media all and (min-width:480px) and (max-width:767px){body{background-color: orange;}}@media all and (min-width:320px) and (max-width:479px){body{background-color: green;}}@media all and (max-width:319px){body{background-color: pink;}}</style>
</head>
<body>
</body>
</html>

5.媒体检测检测横屏和竖屏

<!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><style>/* 横屏 */@media all and (orientation: landscape){body{background-color: red;}}/* 竖屏 */@media all and (orientation: portrait){body{background-color: green;}}</style>
</head>
<body>  
</body>
</html>

二、移动端

1.移动端：手机、ipad、手表等

在做移动端的时候常见的手机型号：

iPhone5=======真实宽度是320=========设计稿是640px=====2倍

iPhone678======真实宽度是375=========设计稿是750px====2倍

iPhone678/plus====真实宽度是414======设计稿是1242px====3倍

iPhoneX========真实宽度是375=========设计稿是1125px====3倍

2.设备像素比

设备像素比dpr=设备像素/设备独立像素

设备像素：物理像素，从设计稿上看到的点点、设计稿的大小、ps量出来的大小

设备独立像素：逻辑像素、虚拟像素、css像素、设备的真实大小、开发人员要写的px

换句话说：设备像素比dpr = 设计稿的大小 / 设备的真实大小

公式：设备像素比dpr = ps量出来的大小/发人员要写的px

开发人员要写的css px = ps量出来的 / dpr

案例1：假设现在我拿到的设计稿总宽是750的，那么我们应该对应在iPhone678下做，已知该设备的真实大小是375，

所以可以得出dpr = 2

假设此时我要做头部区域，ps测量出来的头部区域的高度是100px，我应该写多少px。

开发人员要写的css px = ps量出来的（100） / dpr（2） = 50px

案例2：假设现在我拿到的设计稿总宽是1242px的，那么我应该对应在 iPhone678/plus下做，已知该设备的真实大小是414

所以推出dpr = 3

假设此时我测量的头部区域高度是100px，我应该写多少px

开发人员要写的css px = 100/3 = 33.33

案例3：假设我现在拿到的设计稿是640的，我应该在iPhone5下做，已知该设备的真实大小是320的

所以推出dpr = 2

假设此时我测量的头部区域的高度是88px，我因该写多少px

开发人员要写的css px = 88/2=44px

3.视口

布局视口：我们开发人员写好的布局代码都是运行在布局视口之上的，布局视口一般比较大。布局视口的默认宽度有可能是768px、980px或1024px等

视觉视口：你能看见设备的显示区域

我们写好的代码是在布局视口上，会把布局视口放到视觉视口上继续展示。

理想视口：让布局视口的比例和视觉视口呈现1：1的关系

改成理想视口的语句：<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

viewport：视口

width=device-width：让视口的宽度等于设备的宽度

initial-scale=1.0：视口的初始缩放比例为1

minimum-scale=1.0：最小缩放比例为1

maximum-scale=1.0：最大缩放比例为1

user-scalable=no：禁止用户缩放

4.rem

rem单位：是一个相对单位，是相对于html的font-size而言的

1rem = html的字号

假如html的字号是16px 1rem = 16px 2rem = 32px

假如html的字号是20px 1rem = 20px 2rem = 40px

只要html的字号发生改变，rem也是会跟着改变的。

做移动端的时候元素大小如果想自适应，那么元素大小一般都是写rem单位的。因为rem单位会随着html的字号发生改变。

所以移动端的自适应的要求就是：

元素大小使用rem单位

html的字号要发生改变。（html字号改变的前提是设备的大小发生改变）

注意：如果html的字号不发生改变，那么元素写rem单位也是不会自适应的。

5.媒体查询+rem

<!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,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"><title>Document</title><link rel="stylesheet" href="css/reset.css"><link rel="stylesheet" href="css/02.css">
</head>
<body><header><div>热点</div><div>关注</div></header><nav>nav</nav><main>main</main><footer>footer</footer>
</body>
</html>

css">@media all and (max-width:320px){html{font-size: 14px;}
}
@media all and (min-width:321px) and (max-width:375px){html{font-size: 16px;}
}
@media all and (min-width:376px){html{font-size: 18px;}
}
/* 本项目是基于iPhone5制作的,在该设备下字号是14px,在该设备下1rem是14px.头部区域的高度要显示44px,我们要想办法把44px转成rem1rem = 14px  1px=0.07143px  44px=3.1429px44px = ?rem(44/14)
*/
html,body{height: 100%;
}
body{display: flex;flex-direction: column;
}
header{/* height: 44px; */height: 3.1429rem;background-color: green;display: flex;justify-content: center;align-items: center;
}
header div:nth-child(1){/* width:60px; height:24px*/width: 4.29rem;height: 1.71rem;background-color: #64d885;border-radius: 0.86rem 0 0 0.86rem;text-align: center;line-height: 1.71rem;color: white;
}
header div:nth-child(2){/* width:60px; height:24px*/width: 4.29rem;height: 1.71rem;background-color: #33a453;border-radius: 0 0.86rem 0.86rem 0;text-align: center;line-height: 1.71rem;color: white;
}
nav{/* height: 35px */height: 2.5rem;background-color: aquamarine;
}
main{flex: 1;background-color: rgb(74, 175, 141);
}
footer{/* height: 44px */height:3.14rem ;background-color: blue;
}

6.vw和vh

vw:view width视口的宽度

vh:view height视口的高度

我们在这个所说的视口就是你能看见的设备的显示区域,也就是设备的真实大小

vw和vw是一个单位,这是一个相对单位.

100vw = 视口的宽度 100vh = 视口的高度

如果用的设备是iPhone5,视口的宽度就是320,视口的高度就是568

100vw = 320px 1vw = 3.2px

100vh = 568px 1vh = 5.68

如果用的设备是iPhone678,视口的宽度就是375,视口的高度是667

100vw = 375px 1vw = 3.75px

100vh = 667px 1vh = 6.67px

font-size: 5vw;

假设此时视口的宽度是320px 1vw=3.2px 5vw=16px

假设此时视口的宽度是321px 1vw=3.21px 5vw=16.05px

假设此时视口的宽度是322px 1vw=3.22px 5vw=16.1px

7.vw+rem实现适配

a.原理

在写html字号的时候用vw单位书写,写元素大小的时候用rem单位书写

因为vw是随着视口的宽度发生改变的,也就意味着只要视口的宽(设备的宽)发生改变,vw就会发生改变,因为html的字号用的是vw单位,此时html的字号就会发生改变

只要html的字号改变了,元素用的如果是rem单位,rem单位也会发生改变,元素大小自然也就改变了

(一句话概括:视口宽度影响html的字号,字号影响元素身上用的rem)

b.步骤

1.该项目的设计稿总宽度是640px,所以对应在iPhone5上做,该设备的真实大小是320,所以dpr = 2

2.改视口

3.考虑适配(vw+rem实现实时适配)

假设基准字号为100px， html的字号需要写vw,就需要把100px转成vw

(因为我们基于iPhone5做,所以100vw=320px 1vw=3.2px 100px=(100/3.2=31.25vw))

记住:改工具里面的cssrem设置

4.在body里面让字号回归为默认字号16px

5.正常书写布局代码

<!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,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"><title>Document</title><link rel="stylesheet" href="css/reset.css"><link rel="stylesheet" href="css/04.css">
</head>
<body><header>1</header><nav>2</nav><main>3</main><footer>4</footer>
</body>
</html>

css">html{font-size: 31.25vw;
}
html,body{height: 100%
}
body{display: flex;flex-direction: column;font-size: 16px;
}
header{height: .44rem;background-color: green;
}
nav{height: .35rem;background-color: aqua;
}
main{flex: 1;background-color: pink;
}
footer{height: .44rem;background-color: aqua;
}

8.flexible.js+rem

原理：把当前设备划分为10等份，确定好当前设备的html文字打小就可以了，当前设计稿是750px,那么我们只需要把html文字大小设置为html文字大小为750px/10=75px就可以。里面页面的元素rem值：页面元素的px值/75,剩余的，让flexible.js去计算。

下载：GitHub - amfe/lib-flexible: 可伸缩布局方案

<!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,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"><title>Document</title><link rel="stylesheet" href="css/reset.css"><link rel="stylesheet" href="css/6.css">
</head>
<body><header>头部</header><nav>2</nav><main>3</main><footer>4</footer>
</body>
</html>
<script src="js/flexible.js"></script>

css">/* 如果屏幕超过了750px，就按照750px,不超过750px,html字体就不变化了 */@media all and (min-width:750px) {html {font-size: 75px !important;}
}html,
body {width: 100%;height: 100%;
}body {min-width: 320px;max-width: 750px;width: 10rem;margin: 0 auto;font-family: Arial, Helvetica, sans-serif;background-color: #f2f2f2;display: flex;flex-direction: column;
}header {width: 10rem;height: 1.0667rem;line-height: 1.0667rem;background-color: #ffc001;border-bottom: 1px solid #eaeaea;font-size: .4667rem;color: #1c1c1c;text-align: center;
}nav {width: 10rem;height: 2.1333rem;display: flex;flex-wrap: wrap;background-color: aqua;font-size: .4667rem;
}main {width: 10rem;flex: 1;background-color: pink;overflow: auto;font-size: .4667rem;
}footer {width: 10rem;height: 1.0667rem;line-height: 1.0667rem;background-color: aquamarine;border-top: 1px solid #eaeaea;font-size: .4667rem;color: #1c1c1c;text-align: center;
}