一 meta標簽的使用
1.強制讓文檔的寬度與設備的寬度保持1:1，并且文檔最大的寬度比例是1.0，且不允許用戶點擊屏幕放大瀏覽；
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
width=device-width:寬度等于當前設備的寬度
intial-scale:頁面首次被顯示是可視區域的縮放比例，取值1.0則頁面按實際尺寸顯示，無任何縮放
maximum-scale=1.0, minimum-scale=1.0;可視區域的縮放級別，
maximum-scale用戶可將頁面放大的程序，1.0將禁止用戶放大到實際尺寸之上。
user-scalable:是否可對頁面進行縮放，no 禁止縮放
2.忽略頁面中的數字識別為電話號碼
<meta name="format-detection" content="telephone=no">
3.忽略頁面中的郵箱格式為郵箱
<meta name="format-detection" content="email=no"/>
4.
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
二 關于單位的使用
用來適應不同的移動端屏幕尺寸；
Px像素。類似絕對單位。其實也是相對單位，相對于屏幕的分辨率；
Pt磅 點 打印的尺寸
Em 相對單位，相對于父級的font-size 1em=父級的font-size（直接的父級）
Rem相對單位，相對于根元素的font-size 1rem=根元素的font-size
Vw，vh相對單位，相對于屏幕的寬度和高度，1vw==1%屏幕的寬度
三 Js方法獲取HTMLfontsize
1.手動刷新
<script>
var bw = (document.documentElement.clientWidth/7.2)+"px";
//獲取屏幕寬度)除以7.2，添加上“px”，7.2是設計稿的寬度除以100后得到的值
var htmlTag = document.getElementsByTagName("html")[0];
//在文檔里面通過元素名來獲取元素，html
htmlTag.style.fontSize=bw;
//把計算后的值復制給根元素的font-size;1rem=100px
</script>
2.自動刷新
<script>
window.onload = function(){
/*720代表設計師給的設計稿的寬度，你的設計稿是多少，就寫多少;100代表換算比例，這里寫100是
為了以后好算,比如，你測量的一個寬度是100px,就可以寫為1rem,以及1px=0.01rem等等*/
getRem(640,100)
};
window.onresize = function(){
getRem(640,100)
};
function getRem(pwidth,prem){
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth/pwidth*prem + "px";
}
</script>
四 HTML5標簽的使用
在開始編寫webapp時，建議前端工程師使用HTML5，而放棄HTML4，因為HTML5可以實現一些HTML4中無法實現的豐富的WEB應用程序的體驗，可以減少開發者很多的工作量，當然了你決定使用HTML5前，一定要對此非常熟悉，要知道HTML5的新標簽的作用。比如定義一塊內容或文章區域可使用section標簽，定義導航條或選項卡可以直接使用nav標簽等等。
五 自適應布局模式
在編寫CSS時，使用自適應布局模式，因為這樣做可以讓你的頁面在ipad、itouch、ipod、iphone、android、web safarik、chrome都能夠正常的顯示，你無需再次考慮設備的分辨率。
六 響應式布局
響應式布局就是使用媒體查詢的方式，通過查詢瀏覽器的寬度，不同的寬度應用不同的樣式塊，每個樣式塊對應的是該寬度下的布局方式，從而實現響應式布局，響應式布局的頁面可以適配多種終端屏幕（pc、平板、手機）。
- 什么是響應式？
集中創建頁面的圖片排版大小，可以智能地根據用戶行為以及使用的設備環境（系統平臺、屏幕尺寸、屏幕定向等）進行相對應的布局。
響應式網站布局的依據是：媒體查詢 - 什么是媒體查詢？
可以讓我們根據設備顯示器的特性（如視口寬度、屏幕比例、設備方向：橫向或縱向）為其設定CSS樣式，使用媒體查詢，可以在不改變頁面內容的情況下，為特定的一些輸出設備定制顯示效果。
怎樣在CSS文件中寫CSS響應式媒體查詢
@media screen and (max-width:720px) and (min-width:320px)
{ body{
background-color:red;
} @media screen and (max-width:320px){
body{
background-color:blue;
}
}
七 彈性盒模型布局
Flex是flexinle Box的縮寫，意思是彈性布局；用來為盒模型提供最大的靈活性，任何一個容器都可以指定為flex布局。即：display：flex；
注：設置了flex布局后當前容器內子元素的float、clear、vertical-align屬性將全部消失
- 確定子元素排列的方向: flex-direction:row | row-reverse|column|column-reserve
flex-direction:row 默認子元素水平靠左排列
flex-direction:row-reverse 子元素靠右倒序排列，類似于右浮動
flex-direction:column 豎排
flex-direction:column-reverse 倒序豎排
- 元素超過父容器尺寸時是否換行: flex-wrap:nowrap|wrap|wrap-reverse
flex-wrap:nowrap； 子元素寬度超過父級寬度時，默認不換行
flex-wrap:wrap； 子元素寬度超過父級寬度時，換行
flex-wrap:wrap-reserve； 子元素寬度超過父級寬度時，倒序換行
- 子元素的尺寸確定之后，用此屬性來設置flex-direction定義方向上的分布方式：justify-content:flex-start | flex-end | center | space-between | space-around
justify-content:flex-start 整體子元素靠左
justify-content:flex-end 整體子元素靠右
justify-content:center 整體子元素居中
justify-content:space-between 第一個子元素靠左頂格，最后一個子元素靠右頂格，中間子元素均分距離
justify-content:space-around 第一個子元素靠左的間距和最后一個子元素靠右的間距是中間子元素間距的一半，中間的元素等分間距。
- 子元素的尺寸確定之后，用此屬性來設置flex-direction定義方向上的垂直方向的分布方式：align-items:flex-start | flex-end | center | baseline | stretch
align-items:flex-start 整體垂直靠上排列
align-items:flex-end 整體垂直靠下排列
align-items:center 整體子元素垂直居中（也可以使用margin或padding或定位來實現）
align-items:baseline 子元素內的文字底部對齊，如果文字大小不同，會導致子元素底部不對齊
align-items:stretch 如果子元素不設置高度，高度會被拉伸到和父元素高度相同（除去自身的margin）
- 設置多行子元素在行方向上的對齊方式：align-content : flex-start | flex-end | center | space-between | space-between | space-around | stretch
align-content : flex-start 多行整體靠上排列
align-content : flex-end 多行整體靠下排列
align-content :center 多行整體居中排列
align-content:space-between 第一行子元素靠上頂格，最后一行子元素靠下頂格，中間行子元素等分垂直的間距
