渐渐明白，要做就要做高级，现在社会已经不需要实习工，不需要初级员工。如果你培训几个月能够找到相关工作，如果刚毕业什么都不懂能够找到工作，请好好珍惜。因为很多小白给人免费实习别人都嫌碍事，本人亲历。
你不努力，就别想着高工资了，现在没有那个行业竞争不激烈，要做就要做好，否则就不要怪社会不公！
公司需要适配移动端，只好网上找找教程，请教朋友，才渐渐有些心得体会，小白级别，做个记号。
首先是移动头部meta的书写，这里写多点。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />可以使用h5写法，就是规定编码为utf8
<meta name="keywords" content=“哈哈”/>
<meta name="description" content=“哈哈”/>
上面是SEO作用，给搜索引擎识别
下面几个是移动端布局必须加上的，一定要加上哦
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<meta name="format-detection" content="telephone=no">苹果设备：
1.apple-mobile-web-app-capable
2.apple-mobile-web-app-status-bar-style
3.format-detection
1.Meta标签中的apple-mobile-web-app-capable属性及含义
这meta的作用就是删除默认的苹果工具栏和菜单栏。
content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时，这个行meta就不用加了，默认就是显示。
2.Meta标签中的apple-mobile-web-app-status-bar-style属性及含义
“apple-mobile-web-app-status-bar-style”作用是控制状态栏显示样式
status-bar-style:black
status-bar-style:black-translucent
3.Meta标签中的format-detection属性及含义
format-detection翻译成中文的意思是“格式检测”，顾名思义，它是用来检测html里的一些格式的，那关于meta的format-detection属性主要是有以下几个设置：
meta name="format-detection" content="telephone=no"
meta name="format-detection" content="email=no"
meta name="format-detection" content="adress=no"
也可以连写：meta name="format-detection" content="telephone=no,email=no,adress=no"
下面具体说下每个设置的作用：
一、telephone
你明明写的一串数字没加链接样式，而iPhone会自动把你这个文字加链接样式、并且点击这个数字还会自动拨号！想去掉这个拨号链接该如何操作呢？这时我们的meta又该大显神通了，代码如下：
telephone=no就禁止了把数字转化为拨号链接！
telephone=yes就开启了把数字转化为拨号链接，要开启转化功能，这个meta就不用写了,在默认是情况下就是开启！
二、email
告诉设备不识别邮箱，点击之后不自动发送
email=no禁止作为邮箱地址！
email=yes就开启了把文字默认为邮箱地址，这个meta就不用写了,在默认是情况下就是开启！
三、adress
adress=no禁止跳转至地图！
adress=yes就开启了点击地址直接跳转至地图的功能,在默认是情况下就是开启！rem简单点就是浏览器通过font-size的值进行相对应计算的一种相对单位，font-size越大，rem越大！怎么使用呢？我们根据一种设计稿规格进行相对应的font-size值计算。例如设计稿大小750x1334 我们首先就会匹配这种屏幕的移动设备，比如iPhone6，给它一个初始font-size值。然后进行各种标签，内容添加响应匹配单位rem，通过一步步调试，得到iPhone6模式下的font-size值例如54px。
然后配置320px宽度的屏幕，那么font-size=(320/750)*54,然后rem便可以自动计算，随着屏幕宽窄进行伸缩，做到自动适配。
那么font-size值怎么写进去呢？有两种通用做法，js计算插入，CSS3的媒介查询@media写入
js有现成插件，不过我想自己一步步来，以后再尝试写。目前采用@media方式，小白模式。
html{font-size:50px;}
@media (min-width : 320px) and (max-width : 374px){
html{font-size: 52px;}
}
@media (min-width : 375px) and (max-width : 720px) and (-webkit-min-pixel-ratio : 2){
html{font-size: 54px;}
}
@media (min-width : 414px) and (max-width : 736px) and (-webkit-min-pixel-ratio : 3) {
html {font-size: 56px;}
}
@media (min-width : 768px) and (max-width : 1023px){
html{font-size: 60px;}
}
@media (min-width : 1024px) and (max-width : 1290px){
html{font-size: 55px;}
}
@media (min-width : 1290px){
html{font-size: 75px;}
}上面写法不完善，以后再改（感觉自己好懒），这种写法想要适配多种屏幕需要写很多媒介查询，这是缺点之一。如果设备横竖屏切换，就会越界，这是缺点之二。
就好比人无完人，响应式布局也是如此，所以如果适配众多设备，一个页面数据，代码量成倍增加，反而不利于后期维护。所以很多公司所说的响应式布局其实有个限度，主流手机端，主流浏览器端，对于平板，其他移动设备都不做适配。看看现在的bootstrap，jQuery，vue，zepto等等升级都不在支持一些过于老旧的浏览器，设备。
直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0″ name=”viewport” />
<meta content=”yes” name=”apple-mobile-web-app-capable” />
<meta content=”black” name=”apple-mobile-web-app-status-bar-style” />
<meta content=”telephone=no” name=”format-detection” />
<title>移动端注册练习</title>
<link rel="stylesheet" type="text/css" href="css/reg.css">
<script type="text/javascript" src="js/reg.js"></script>
</head>
<body>
<div id="reg">
<!-- 表单 -->
<form>
<ul class="progressbar">
<li>Account</li>
<li>Social</li>
<li>Personer</li>
</ul>
<fieldset>
<h3>Create Your Account</h3>
<input type="text" name="Email" placeholder="Email">
<input type="password" name="password" placeholder="password">
<input type="password" name="confirmPassword" placeholder="Confirm Password">
<input type="button" name="button" value="NEXT">
</fieldset>
</form>
</div>
</body>
</html>/* 注册页面样式 */
html{font-size:50px;}
@media (min-width : 320px) and (max-width : 374px){
html{font-size: 52px;}
}
@media (min-width : 375px) and (max-width : 720px) and (-webkit-min-pixel-ratio : 2){
html{font-size: 54px;}
}
@media (min-width : 414px) and (max-width : 736px) and (-webkit-min-pixel-ratio : 3) {
html {font-size: 56px;}
}
@media (min-width : 768px) and (max-width : 1023px){
html{font-size: 60px;}
}
@media (min-width : 1024px) and (max-width : 1290px){
html{font-size: 55px;}
}
@media (min-width : 1290px){
html{font-size: 75px;}
}
html,body,h1,h2,input,textarea,p,button,header,nav,footer{margin:0;padding:0;}
ul{list-style: none;}
input{border-style:none;}
fieldset{border-style:none;width:100%;height: 500px;}
.progressbar{font-size: 0.8rem;width: 100%;}
.progressbar li{width:33%;height: 100%;float: left;}
#reg{width:13rem;height: 20rem;background: rgb(241, 248, 250);position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);}
#reg h3{width:10rem;color:#888;font-size: 1rem;}
#reg input{width: 10rem;height: 1.3rem;font-size: 0.8rem;margin-bottom: 0.5rem;}
#reg input:last-child{width: 5rem;height: 2rem;background: #27AE60;color:#fff;}
// 注册页面
window.οnlοad=function(){
var reg=document.getElementById('reg');
var gtw=window.getComputedStyle(reg).width;//rem单位是浏览器自动计算
var gth=window.getComputedStyle(reg).height;//要使用getComputedStyle获取浏览器中的reg的宽高
var htm=document.getElementsByTagName('html')[0];
var htmF=window.getComputedStyle(htm).fontSize;//css中的font-size值
var inputs=reg.getElementsByTagName('input');
//矩形平板,效果不理想
if(screen.width>=screen.height){
if(screen.width<=parseFloat(gth)){
htm.style.fontSize=parseFloat(screen.width)/parseFloat(gth)*parseFloat(htmF)+'px';
}
if(screen.height<=parseFloat(gtw)){
htm.style.fontSize=parseFloat(screen.height)/parseFloat(gtw)*parseFloat(htmF)+'px';
}
gth=parseFloat(screen.width)-200+'px';
gtw=parseFloat(screen.height)-150+'px';
reg.style.width=gth;
reg.style.height=gtw;
}
}