漸漸明白，要做就要做高級，現在社會已經不需要實習工，不需要初級員工。如果你培訓幾個月能夠找到相關工作，如果剛畢業什麼都不懂能夠找到工作，請好好珍惜。因爲很多小白給人免費實習別人都嫌礙事，本人親歷。
你不努力，就別想着高工資了，現在沒有那個行業競爭不激烈，要做就要做好，否則就不要怪社會不公！
公司需要適配移動端，只好網上找找教程，請教朋友，才漸漸有些心得體會，小白級別，做個記號。
首先是移動頭部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;
}
}