移动端 2018年的笔记
一、移动端视口（Viewport ）设置
先提出一个问题，
一个PC的页面在移动设备上展示效果是怎么样的呢？
iphone5在设备模拟器的宽度是320像素，一千多像素宽的PC页面在宽度320像素的移动设备上，是把整个页面全部展示，还是只看到页面的一部分？
实际上得到的效果（在iphone5的设备模拟器上）是把整个PC页面都看到了，iphone5只有320像素，为什么能把整个页面都看到呢？这是视口Viewport起到的作用。
1、讲一下viewport的历史
早在诺基亚的时代已经有移动web的雏形出现，那时PC页面可以用手机去访问，因为PC页面宽度都是一千像素左右，而那是的手机都是几百像素甚至更小，得到的效果在移动web初期，看到的是页面的一个角落，用户要拖动或是上下左右按钮来看页面。
于是就引入的viewportd的概念，viewport是把整个页面渲染在一个比例比较大的页面里（ios默认是980，安卓机不确定），通过渲染到980的尺寸后，在通过缩放看得到整个页面的全貌。
2、手机浏览器默认为我们做了两件事
1. 使页面渲染在一个980px（IOS）的viewport里
2. 渲染完后，通过缩放看到viewport的全貌
为什么手机浏览器不直接缩放，还要渲染加viewPort呢？
1000多像素的页面缩放到320像素排版可能会出问题，为了排版不出现问题，先虚拟一个980像素的ViewPost让页面排版正确，在通过缩放让看的正确，
这是手机浏览器，也是viewport为我们做的事情。
可以理解为两个viewPort
1. visual viewport ( 视口 )
2. layout viewport ( 布局 )
注意，
layout viewport不是原来页面大小，如ios默认Viewport是980px
可以理解为手机浏览器分两层，第一层layout viewport（布局viewport）负责把页面渲染到底层，在通过visual viewport（视口viewport）缩放看到页面的多少。
设计移动web，为什么不使用默认的980px的布局，使用viewport来开发呢？
1. 宽度不可控制，不同系统不同设备的默认值都可能不同
2. 页面缩小版显示，交互不友好
3. 链接不可点击
4. 有缩放，缩放后又有滚动
5. 最主要的是font-size为40px等于PC上12px同等物理大小，不规范
我们不用默认的viewport，可以通过meta标签去改变默认的viewport
3、设置meta标签
默认980宽度的viewport不是很适合开发移动web页面的，因为不规范，
下面我们设置meta标签，改造viewport来达到移动web我们想要的效果。
设置Viewport中meta标签的语法为
<meta name="viewport" content="name=value, name=value">
name值一般有下面几种参数：
1. width 设置布局viewport的特定值（device-width）
2. initial-scale 设置页面的初始缩放
3. minimum-scale 最小缩放
4. maximum-scale 最大缩放
5. user-scalable 用户能否缩放，我们设置为no用户不可缩放
下面做一个比较，
先看一下没有设置wievport时，js获取页面的宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>没有viewport设置</title>
<style>
body{
margin:0;
}
#box{
width:320px;
height:568px;
background-color:orange;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
//查看页面宽度的js代码
console.log(document.body.clientWidth); // 980
console.log(window.innerWidth); // 980
</script>
</body>
</html>在设备模拟器中，两段js返回的都是980，viewport是默认的980，DIV显的有点小
我们在通过viewport设置meat标签 content="width=320" 设置布局等于320
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=320">
<title>viewport设置</title>
<style>
body{
margin:0;
}
#box{
width:320px;
height:568px;
background-color:orange;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
console.log(document.body.clientWidth); // 320
console.log(window.innerWidth); // 320
</script>
</body>
</html>document.body.clientWidth返回 320
window.innerWidth返回320
再设备模拟器的iphone5下，DIV刚好百分百铺满页面，
这里 content="width=320" 是iphone5的宽度，
如果是其它移动设备尺寸不是320，为了更好的兼容性，它提供我们这个值 content="width=device-width" 让布局宽度等于设备宽度。
最佳设置
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
这是是淘宝移动端的视口设置
<meta name=viewport content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
二、视口设置（妙味笔记）
viewport翻译过来叫视口，就是可视区窗口，说白了他就是专门来设置可视区大小缩放等等
不设置viewport，默认的可视区宽度在移动端一般是980像素，
一般是980像素不是绝对980像素，比如页面上有些元素超过980像素，它就根据页面内容的宽度走了
如果不设置viewport手机屏幕默认宽是980像素，显示文字的尺寸会很小，所以不能用默认值要设置一下，
移动端设置和PC不太一样，在PC端可视区多大就是多大，在移动端可视区大小是可以设置的。
1、width设置
常用的第一项设置width，可视区的宽度，有两种设置可以选
1. 数字number
2. 是一个关键字device-width是设备的宽度（device是设备的意思），也就是说让可视区宽度与设备宽度保持一致
在安卓手机直接设置尺寸，兼容性不是特别的好，
一般我们用的是第二个种设置device-width，宽度等于设备本身的宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width"/>
<title>视口设置</title>
<style type="text/css">
body{
margin:0;
}
#box {
width: 300px;
height: 300px;
background:red;
margin:0 auto;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>2、user-scalable 是否允许用户进行缩放
在移动端有一个特性，通过双指操作可以放大缩小（大部分移动端会禁止缩放）
设置是否允许用户缩放
1. user-scalable=yes 允许缩放
2. user-scalable=no 禁止缩放
注意：
iOS10系统无效，在这之前都是支持的很好
3、minimum-scale 初始比例
什么是初始比例initial-scale，它还是和缩放有关，
如果设置初始 initial-scale=0.5 就是把页面缩放0.5显示，
整个把每个元素都缩放是很麻烦的，实际浏览器把可视窗口放大了一倍，里面的就等于缩放了0.5，元素缩小实际是把窗口的尺寸给放大了
初始比例要和最小缩放比率保持一致，最大最小的缩放比
minimum-scale=0.5 最小缩放比例
maximum-scale=0.5 最大缩放比例
4、像素比
把一个像素放大的N个像素去显示，N就是像素比，
每款手机都有像素比，每款手机的像素比都不太一样
我们用js提取一下像素比
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no"/>
<title>缩放比</title>
<style type="text/css">
body{
margin:0;
}
#box {
width: 100px;
height: 100px;
background:red;
margin:0 auto;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
console.log(window.devicePixelRatio); // 像素比是window对象上的一个属性devicePixelRatio
</script>
</body>
</html>三、移动开发像素Pixel的知识
通过一个例子学习相关知识，
首先提出一个问题，一张 640 x 1136 的图片，能不能在iPhone5上完全显示？
因为iPhone5的分辨率宣称是 640 x 1136，刚好这张图片就应该能再iphone5上，完全展示把屏幕铺满了吧？
代码很简单，div元素宽度、高度正好是640 x 1136
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin:0;
}
#box{
width:640px;
height:1136px;
background-color:orange;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>打开chrome开发者调试工具，设备模拟器里iphone5，div元素没有把整个屏幕撑满，这是为什么呢？
在设备模拟器上我们发现iphone5的设备尺寸是320 x 568像素，iphone5不是640 x 1136像素吗，怎么变成320x568像素了？
这里说一下像素的基础知识点 像素和物理像素的关系，
iphone5对外宣传的 640 x 1136 是物理像素，而我们实际开发用的px是逻辑像素，两者之间的关系是不一样的
px css pixels逻辑像素，浏览器使用的抽象单位
dp,pt device independent pixels 设备无关像素
dpr devicePixelRatio 设备像素缩放比
下面是课堂解释
px为什么叫抽象单位，
因为他可以根据不同的设备和关系变大或变小，所以叫抽象单位
dp,pt设备无关像素，
意思是设备是固定的，物理像素是固定大小，不会像抽象像素那样可大可小，在物理上它多大就是多大
dpr
他们两者的关系是通过dpr（device independent pixels 设备像素缩放比）来控制他们两者的关系
它们两者之间的计算公示 1px = (dpr)^2 * dp
为什么iphone5是320*568px呢？就是因为iphone5的像素比dpr = 2
下面的图就是dpr等于2的情况：
平面上: 1px = (2)^2 * dp
根据上面的公示一个css像素就有4个物理像素去渲染
维度上 1px = 2 * dp
当成一个长度单位来说，一个css像素等于两个dp的长度
因此iphone 640dp*1136dp 除与2就等于 320px*568px，这就是设备尺寸是320px*568像素了
最关键的点就是dpr，为什么iphone5的dpr等于2呢？
下面的知识点就是DPI, PPI
DPI 打印机每英寸可以喷的墨汁点（一般用印刷行业）
PPI 屏幕每英寸的像素数量，即单位英寸内的像素密度
目前，在计算机显示设备参数描述上，二者意思表达的是一样的，都是单位英寸内像素的密度。
计算公示：以iPhone5为例
PPI=√（1136^2+640^2） / 4 = 226ppi （视网膜Retina屏）
PPI越高，像素数越高，图像越清晰。
以上内容来自
https://www.imooc.com/video/9564
下面是相关转帖
浅谈移动 Web 开发（上）深入概念
https://www.infoq.cn/article/development-of-the-mobile-web-deep-concept/
Hello，移动web基础知识整理
https://github.com/CruxF/IMOOC/issues/4
简简单单的移动web开发基础知识讲解
http://www.imooc.com/article/75342
四、适配
百分比适配
wiewport适配
rem适配
1、百分比布局
viewport把视口大小设置的跟设备一样的，虽然每种设备的宽度是不一样的，
四份DIV横向排成一排宽度各占四分之一，宽度可以设置25%就是四分之一了，问题出现在高度百分百不好算，还是写成具体的值，一般百分百一般只是配合使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no">
<title>百分比适配</title>
<style>
body{
margin:0;
}
div{
height:100px;
width:25%;
float:left;
}
div:nth-of-type(1){
background:red;
}
div:nth-of-type(2){
background:orange;
}
div:nth-of-type(3){
background:yellow;
}
div:nth-of-type(4){
background:green;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</body>
</html>顺便说一下这里没有设置"width=device-width"仅设置"初始比例 ，最大缩放比例 ,最小缩放比例"视口大小是多少？视口默认是device-width，什么都不设置一般视口默认980px。
<meta name="viewport" content="user-scalable=no,initial-scale=1.0,maximum-scale=1.0 ,minimum-scale=1.0">
2、viewport适配
不把视口设置成content="width=device-width"固定的设备宽度，换一种写法，通过js生成初始比例initial-scale=1.0，最大缩放比例maxmum-scale=1.0，最小缩放比例minimum-scale=1.0
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
// 获取屏幕尺寸
var w = window.screen.width;
console.log(w);
// 通过视口viewport把屏幕尺寸都设置成一致的320px，
// js操作缩放比例，把窗口里内容缩放达到宽度320的效果，缩放窗口比例修改的是视口的大小。
var targetW = 320;
// 求出缩放值：
// 当前窗口尺寸/目标尺寸（把窗口里的元素放大，把分辨率缩小）
var scale = w/targetW;
console.log(scale * 375);
// 创建一个标签
var meta = document.createElement("meta");
// 设置name属性
meta.name = "viewport";
// 设置content属性
meta.content = "user-scalable=no,initial-scale="+scale+",maximum-scale="+scale+",minimum-scale="+scale+"";
// 把标签添加到头部
document.head.appendChild(meta);
// 320/4=80 高度80px
</script>
<title>viewport适配</title>
<style>
body{
margin:0;
}
div{
height:80px;
width:25%;
float:left;
}
div:nth-of-type(1){
background:red;
}
div:nth-of-type(2){
background:orange;
}
div:nth-of-type(3){
background:yellow;
}
div:nth-of-type(4){
background:green;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</body>
</html>3、rem布局
rem是根据根节点的字体大小计算的，怎么设置根节点HTML的字体大小？
1. 不同屏幕的宽度适配，首先用JS获取屏幕宽度
2. 根据屏幕大小的不同，设置根节点的字体大小 （ 屏幕宽度 / 16 ）
以iphone5屏幕宽度320像素为例
1. 根节点的设置 <html style="font-size: 20px;"> ，意思是根节点字体大小是20像素，代表 1rem = 20px
2. 屏幕宽度320像素，四个div宽度80px就撑满一行了，1rem等于20px，80像素换算等于4rem，高度80px也一样等于4rem，
设备模拟器切换到iphone5，四个div变大撑满一行，这就完成了一个动态的计量单位的适配
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<script>
(function(){
// 获取屏幕宽度
var html = document.documentElement;
var hWidth = html.getBoundingClientRect().width;
console.log(hWidth);
// 屏幕大小不同，设置不同的根节点
html.style.fontSize = hWidth/16 + 'px';
})();
</script>
<title>rem适配</title>
<style>
body{
margin:0;
}
div{
box-sizing:border-box;
height:4rem;
width:4rem;
float:left;
}
div:nth-of-type(1){
background:red;
}
div:nth-of-type(2){
background:orange;
}
div:nth-of-type(3){
background:yellow;
}
div:nth-of-type(4){
background:green;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</body>
</html>一个屏幕的宽度是320， 320 / 16 = 20 根节点字体被设置成20像素，就是1rem等于20像素，也就是说16rem刚好把屏幕撑满一整行
现在，在任何宽度的设备上打开，16rem宽的元素都撑满一行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<script>
(function(){
// 获取屏幕宽度
var html = document.documentElement;
var hWidth = html.getBoundingClientRect().width;
console.log(hWidth);
// 屏幕大小不同，设置不同的根节点
html.style.fontSize = hWidth/16 + 'px';
})();
</script>
<title>撑满一行</title>
<style>
body{
margin:0;
}
div{
box-sizing:border-box;
height:4rem;
width:16rem;
background:red;
}
</style>
</head>
<body>
<div>1</div>
</body>
</html>屏幕的宽度 / 16 代表1rem ，
16rem相当于乘回去，这个时候相当于整个屏幕的宽了
如果设计图宽度750像素，该怎么去适配呢？
屏幕的宽度除与50，代表一个元素要占满一整行给15rem就可以了，
如果屏幕的宽度除与15，代表50rem能占满一整行
那么设计稿上宽度是750，代表1rem等于50像素，在设计稿上量到一个元素宽100px，在页面结构上给他2rem就可以了，
也就是说设计图的宽是750，代码里是屏幕宽度除以15的话，就相当于750的设计图分成了15分，每一份都代表了1rem，1rem等于50像素，
量到设计图的每个元素大小，比如设计图的106像素（106 / 50 = 2.12），换算后是2.12rem
以设计稿的宽是750像素做一个实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<script>
(function(){
var html = document.documentElement;
var hWidth = html.getBoundingClientRect().width;
console.log(hWidth);
html.style.fontSize = hWidth/16 + 'px';
})();
</script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<header id="header">
<a id="task" href="javascript:;"><span class="glyphicon glyphicon-tasks"></span></a>
<h1><span class="glyphicon glyphicon-lock"></span>Ruyic</h1>
<a id="refresh" href="javascript:;"><span class="glyphicon glyphicon-repeat"></span></a>
</header>
</body>
</html>less文件
@r:50rem;
a,
input,
button{
-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}
input,
button {
-webkit-appearance:none;
border-radius:0;
}
body,h1{
margin:0;
padding:0;
font-family:Helvetica;
}
a{
text-decoration:none;
}
body *{
-webkit-text-size-adjust:100%;
}
#header{
height:103/@r;
background-color:#ef3239;
position: relative;
a{
width:128/@r;
height:88/@r;
line-height:88/@r;
text-align:center;
position:absolute;
top:0;
}
#task{
left:0;
font-size:37/@r;
}
#refresh{
right:0;
font-size:36/@r;
}
span{
color:#fff;
}
h1{
text-align:center;
font-size:39/@r;
color:#fff;
line-height:88/@r;
span{
font-size:26/@r;
margin-right:16/@r;
}
}
}到这里基本的适配知识掌握了
五、移动端的一些常见设置
腾讯X5内核浏览器，强制竖屏
<meta name="x5-orientation" content="portrait" />
腾讯X5内核浏览器，强制横屏
<meta name="x5-orientation" content="landscape" />
腾讯X5内核浏览器，强制全屏，地址栏等都会隐藏
<meta name="x5-fullscreen" content="true" />
UC浏览器下，强制竖屏显示
<meta name="screen-orientation" content="portrait"/>
UC浏览器下，强制横屏显示
<meta name="screen-orientation" content="landscape"/>
UC浏览器下，强制全屏显示
<meta name="full-screen" content="yes"/>
禁止识别电话号码或邮件的识别，chrome应该已经自动禁止了这个功能
<meta name="format-detection" content="telephone=no,email=no" />
在移动端浏览器里，点击拨打电话和发邮件的链接
<a href="tel:13212345678">请拨打电话13212345678</a> <a href="mailto:admin@admin.com">请发送邮件</a>
去交或换掉A标签点击的时候的灰色的阴影，课程上说按钮也会出现点击阴影，如何去掉了A标签、按钮点击时的阴影
<style type="text/css">
a,
input,
button{
/*
设置点击时的高亮颜色样式，把阴影换成红色，不建议这样用
-webkit-tap-highlight-color:red;
*/
/* 把阴影变成透明的或没有颜色全透明的 */
-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}
</style>
<a href="http://baidu.com">baidu.com</a>
<input type="button" value="按钮">解决ios系统下按钮会变成圆角的问题，两条样式一起用圆角就彻底没有了
input,button{
/* */
-webkit-appearance:none;
border-radius:0;
}
<input type="button" value="按钮">移动端每台设备的默认字体都不太一样，移动端大部分设备都没有PC端的微软雅黑和宋体，所有设备都会有这么一款英文字体
body{
font-family:Helvetica;
}这条样式之前在chrome下解决字体最小12px的限制，新版chrome这条样式已经不能解决最小字体12的限制了，
但在移动端他还有用，在部分手机上切换横竖屏的时候字体会缩放，有写用户会在浏览器里设置字体大小，这条项设置可以禁止用户修改字体大小
body *{
-webkit-text-size-adjust:100%;
}教程里说会禁止掉移动端长按屏幕时会选中文字，注意"-webkit-user-select:none"这条样式在苹果手机上，会让表单没法选中，一定不要使用
body{
/*-webkit-user-select:none;*/
}"Font Boosting"问题，在webkit内核下偶尔P标签里的文字被浏览器放大了，给他设置一个最大高度 max-height:100%
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Font Boosting问题</title>
<meta name="viewport" content="width=device-width,user-scalable=no">
<style>
.p1{
font-size:18px;
line-height:30px;
height:30px;
}
.p2{
font-size:18px;
line-height:30px;
max-height:100%;
}
</style>
</head>
<body>
<p>Font Boosting</p>
<p>"Font Boosting"这个问题不是在所有地方都能遇到，必须是大段的文字才会出现这个问题。这是webkit内核浏览器，因为用户体验而放大文字。如果"p2"变的比"p1"大很多，就是遇到了Font Boosting问题。通常在一段文字我们没有给他设置高度的时候，在webkit内核下，文字的大小被浏览器放大了。原来这个特性被称作"Font Inflation",是webkit给浏览器端浏览器提供的一个特性。怎么解决呢？给他设置高度如果不好确定高度，给他设置一个最大高度"max-height:100%"</p>
</body>
</html>六、用css方法模仿一个固定定位
固定定位的问题，课程里说在移动端兼容不太好，移动端尽量不要使用固定定位，固定在顶部的元素滑动时会有些抖。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no">
<title>用css方法模仿一个顶端固定定位</title>
<style>
html{
height:100%;
/*-- 1.页面滚动条被隐藏了 --*/
overflow:hidden;
/*-- 3.给html加一条"position:relative"相对定位 --*/
position:relative;
}
body{
height:100%;
margin:0;
/*-- 2. 出来的滚动条是body上的滚动条 --*/
overflow:auto;
}
header{
height:40px;
width:100%;
line-height:40px;
text-align:center;
color:#fff;
background:rgba(32,35,64,.7);
/*-- 4: 给header加一条position:absolute绝对定位，header根据html定位 --*/
position:absolute;
}
/*-- 页面内容填充的多一些 --*/
section{
height:1031px;
background:url(http://ruyic.com/blog/uploads/image/201907/pic1564549780422166.jpg);
/*-- 5: 添加一条padding-top:40px因为用的内容是图片换成margin-top --*/
margin-top:40px;
}
</style>
</head>
<body>
<header>Header</header>
<section></section>
</body>
</html>
<!--
1: 给html加一条"overflow:hidden"清除掉页面默认的滚动条。
html{
height:100%;
overflow:hidden;
}
2: 给body加一条"overflow:auto"样式，出现的滚动条是body上的滚动条"
body{
height:100%;
margin:0;
overflow:auto;
}
3: 给html加一条"position:relative"相对定位
html{
height:100%;
overflow:hidden;
position:relative;
}
4: 给header加一条"position:absolute"绝对定位，header根据html定位
header{
height:40px;
width:100%;
line-height:40px;
text-align:center;
color:#fff;
background:rgba(32,35,64,.7);
position:absolute;
}
5: 5: 添加一条padding-top:40px因为用的内容是图片换成margin-top
section{
height:1031px;
background:url(http://ruyic.com/blog/uploads/image/201907/pic1564549780422166.jpg);
margin-top:40px;
}
-->滚动条被header给盖着了，滚动条是body的，header是根据html定位的层级比body高。老版本安卓手机不支持这种方法。手机测试有回弹卡顿的问题，最终要用js来实现固定定位。
ios设备上body设置的overflow:hidden后，屏幕还是能横着拖移动，
比如设置header宽度为200%就出现了这个问题，解决方法给代码包一层元素wrap
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no">
<title>ios下body的overflow问题</title>
<style>
html{
height:100%;
overflow:hidden;
}
body{
height:100%;
margin:0;
/*-- 2: HTML的绝对定位放到body里，overflow的值改hidden隐藏滚动条 --*/
overflow:hidden;
position:relative;
}
#wrap{
/*-- 3: 给外框一个overflow:auto，滚动条改在wrap上 --*/
height:100%;
overflow:auto;
}
header{
height:40px;
/*-- 1: 问题：这里改成200% --*/
width:200%;
line-height:40px;
text-align:center;
color:#fff;
background:rgba(32,35,64,.7);
/*-- 4: 这里不变，只是已根据html定位变成根据body定位 --*/
position:absolute;
}
section{
height:1031px;
background:url(http://ruyic.com/blog/uploads/image/201907/pic1564549780422166.jpg);
margin-top:40px;
}
</style>
</head>
<body>
<div id="wrap">
<header>Header</header>
<section></section>
</div>
</body>
</html>适配
百分比适配
wiewport适配
rem适配
viewport把视口大小设置的跟设备一样的，但每种设备的宽度还是不一样的。
百分比布局: 四份DIV横向排成一排宽度各占四分之一，宽度可以设置25%就是四分之一了，问题出现在高度百分百不好算，还是写成具体的值，一般百分百一般只是配合使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no">
<title>百分比适配</title>
<style>
body{
margin:0;
}
div{
height:100px;
width:25%;
float:left;
}
div:nth-of-type(1){
background:red;
}
div:nth-of-type(2){
background:orange;
}
div:nth-of-type(3){
background:yellow;
}
div:nth-of-type(4){
background:green;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</body>
</html>顺便说一下这里没有设置"width=device-width"仅设置"初始比例 ，最大缩放比例 ,最小缩放比例"视口大小是多少？视口默认是device-width，什么都不设置一般视口默认980px。
<meta name="viewport" content="user-scalable=no,initial-scale=1.0,maximum-scale=1.0 ,minimum-scale=1.0">
viewport适配：不把视口设置成content="width=device-width"固定的设备宽度换一种写法。通过js生成initial-scale=1.0初始比例 ,maxmum-scale=1.0最大缩放比例 ,minimum-scale=1.0最小缩放比例。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
//屏幕尺寸
var w = window.screen.width;
console.log(w);
//通过viewport设置把屏幕尺寸都设置成一致的320px，
//js操作缩放比例，把窗口里内容缩放达到宽度320的效果，缩放窗口比例修改的是视口的大小。
var targetW = 320;
//求出缩放值：当前窗口尺寸/目标尺寸(把窗口里的元素放大，把分辨率缩小)
var scale = w/targetW;
console.log(scale * 375);
//创建一个标签
var meta = document.createElement("meta");
//设置name,content
meta.name = "viewport";
meta.content = "user-scalable=no,initial-scale="+scale+",maximum-scale="+scale+",minimum-scale="+scale+"";
//把标签添加到头部
document.head.appendChild(meta);
//320/4=80高度80px
</script>
<title>viewport适配</title>
<style>
body{
margin:0;
}
div{
height:80px;
width:25%;
float:left;
}
div:nth-of-type(1){
background:red;
}
div:nth-of-type(2){
background:orange;
}
div:nth-of-type(3){
background:yellow;
}
div:nth-of-type(4){
background:green;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</body>
</html>