這兩天開始編寫手機頁面，作為類似官網一樣的使用，因為實在手機端訪問的web端，沒有做過嘗試，而且由於手機的種類很多，導致兼容性要求很高，在網上找了一些教程，制作完畢后決定分析給大家。
先給大家看下成品效果圖：
這就是手機訪問之后的樣子了，那具體怎么做好兼容，又能省事省力呢，我從網上找到了這個框架：
直接百度：ydui，這是一個專門為移動端web前端使用框架，使用方式也很簡單，打開這個網站點擊開始使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<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" />
<!-- 引入YDUI樣式 -->
<link rel="stylesheet" href="path/build/css/ydui.css" />
<!-- 引入YDUI自適應解決方案類庫 -->
<script src="path/build/js/ydui.flexible.js"></script>
</head>
<body>
<div class="g-view">
</div>
<!-- 引入jQuery 2.0+ -->
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- 引入YDUI腳本 -->
<script src="path/build/js/ydui.js"></script>
</body>
</html>
這是測試頁面，我們只需要下載這個框架的文件就行了，之后調用上面代碼中調用到的css，以及js即可，之后所有的內容寫在class為g-view的div中，這個框架就可以自動幫你調整兼容性了，需要注意的是，這是移動端框架，所以只支持移動端，如果是pc端或者平板訪問可能就不會很兼容了。
為了和團隊開發大小規范，一般移動端的單位都是rem，所以不能再用px作為單位了，可是作為設計還是會給你px的圖紙，為此我們就需要自己計算好單位換算即可。