0.css
怎麼去寫一份比較好的做品展現。html
多看國外的網址而後本身模仿。css3
(1) 作後端系統的各類界面。移動端包含各類頁面。(2)各類表單。包含各類下路框,單選按鈕,多選按鈕,各類加載插件,各類日曆插件。git
(3) 你作過的各類精緻的效果。github
(4) 你作的一個比較好的我的css3簡歷記得那個特別好的效果麼。web
(5) 開源項目,我的博客地址等等。ajax
(6)各類敏捷開發的方法等等。chrome
0.一些須要看的博客 :http://blog.csdn.net/binyao02123202/article/details/51629305後端
http://sc.chinaz.com/info/130410113358.htmapi
http://www.cnblogs.com/xsilence/p/5774737.html
http://www.uisdc.com/mobile-design-process
1.
initial-scale=1.0 確保網頁加載時,以 1:1 的比例呈現,不會有任何的縮放。
在移動設備瀏覽器上,經過爲 viewport meta 標籤添加 user-scalable=no 能夠禁用其縮放(zooming)功能。
2. 必要的meta.
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
關於X-UA-Compatible
這是一個,文檔兼容模式的定義。
Edge 模式告訴 IE 以最高級模式渲染文檔,也就是任何 IE 版本都以當前版本所支持的最高級標準模式渲染,避免版本升級形成的影響。簡單的說,就是什麼版本 IE 就用什麼版本的標準模式渲染
<meta http-equiv="X-UA-Compatible" content="IE=edge">
使用如下代碼強制 IE 使用 Chrome Frame 渲染
<meta http-equiv="X-UA-Compatible" content="chrome=1">
提示 IE 用戶安裝 Google Frame
Google 官方提供了對 Google Frame 插件安裝狀況的檢測,這裏直接調用方法便可,若是檢測到 IE 並未安裝 Google Frame,則彈出對話框提示安裝。
<script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script><script>CFInstall.check();</script>
最佳的兼容模式方案,結合考慮以上兩種:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Cache-Control" content="no-transform"/>這個是百度官方給的禁止轉碼聲明。在網頁中添加了這一條,百度就不會移動搜索中將網站轉碼,並呈現給移動端用戶。
<meta http-equiv="Cache-Control"content="max-age=0"/> 頁面緩存時間的最大值是0秒,目的是不讓頁面緩存,每次訪問必須到服務器讀取
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=2.0, user-scalable=1"> -->
<meta name="apple-mobile-web-app-capable" content="yes">
默認瀏覽器全屏
若是safari不開啓全屏模式,也就是<meta name="apple-mobile-web-app-capable" content="yes"/>這句代碼不加在html裏面,那麼經過safari瀏覽該html的時候保存的Cookie等其餘數據不會被清空
可是開啓了全屏模式,而且將此快捷鍵保存到手機桌面上,經過桌面上的圖標打開該網站後,而後按下hone鍵回到桌面,再經過桌面上的圖標打開該網站,發現數據全被清空了.也就是好像safari全屏模式下瀏覽網頁,按下hone鍵就會清空數據同樣?
<meta name="layoutmode" content="standard">
<meta name="apple-mobile-web-app-status-bar-style" content="black"> 做用是控制狀態欄顯示樣式
<meta name="renderer" content="webkit">
<!--uc瀏覽器判斷到頁面上文字居多時,會自動放大字體優化移動用戶體驗。添加如下頭部能夠禁用掉該優化-->
<meta name="wap-font-scale" content="no">
<meta content="telephone=no" name="format-detection" />
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
通常狀況系能夠考慮用到的代碼:
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="Cache-Control" content="no-transform"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=2.0, user-scalable=1"> --> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="layoutmode" content="standard"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="renderer" content="webkit">
3. css之px自動轉rem—sublime 插件CSSREM http://www.cnblogs.com/olivianate/p/5328716.html
4. 能夠考慮引入這個css https://github.com/lzxb/flex.css
5.也是一種移動端比較流行的佈局方式,我體驗了一下,不太好用哈
var iScale = 1;
iScale = iScale/window.devicePixelRatio;
document.write();//這裏邊寫iScale的的meta
var iWidth = document.documentElement.clientWidth/16;
document.getElementByTagName('html')[0].style.fontSize = iWidth + 'px';