1：之前做的是兩套頁面。現在改成響應式布局。發現加上
@media only screen and (max-width: 500px) {
.gridmenu {
width:100%;
}
.gridmain {
width:100%;
}
.gridright {
width:100%;
}
}
諸如上面的樣式表在手機尺寸的時候不起作用。
因為沒加下面這段meta代碼
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
平時寫的pc端不需要上面這段。手機端需要。在pc端改的話容易忽略上述。
2：meta總結
META標簽是HTML語言HEAD區的一個輔助性標簽，它位於HTML文檔頭部的<HEAD>標記和<TITLE>標記之間，它提供用戶不可見的信息。meta標簽通常用來為搜索引擎robots定義頁面主題，或者是定義用戶瀏覽器上的cookie；它可以用於鑒別作者，設定頁面格式，標注內容提要和關鍵字；還可以設置頁面使其可以根據你定義的時間間隔刷新自己,以及設置RASC內容等級，等等。
（1）SEO優化:
各關鍵詞間用英文逗號“,”隔開。META的通常用處是指定搜索引擎用來提高搜索質量的關鍵詞。
<meta name="keywords" content="your tags" />
Description用來告訴搜索引擎你的網站主要內容。
<meta name="description" content="150 words" />
標注網頁的作者或制作組
<Meta name="Author" Content="張三，abc@sina.com">
標注版權
<Meta name="Copyright" Content="本頁版權歸Zerospace所有。All Rights Reserved">
搜索引擎都有自己的“搜索機器人”（ROBOTS），並通過這些ROBOTS在網絡上沿着網頁上的鏈接（一般是http和src鏈接）不斷抓取資料建立自己的數據庫。對於網站管理者和內容提供者來說，有時候會有一些站點內容，不希望被ROBOTS抓取而公開。為了解決這個問題，ROBOTS開發界提供了兩個辦法：一個是robots.txt，另一個是The Robots META標簽。robots就是一個必須放在網站根目錄、讓搜索蜘蛛讀取的txt文件，文件名必須是小寫的"robots.txt"。通過robots.txt可以控制SE收錄內容，告訴蜘蛛哪些文件和目錄可以收錄，哪些不可以收錄。 在這里說明下，如果在網站目錄下加了這個文件，搜索引擎會認為你是一個比較正規標准的站。
Robots用來告訴搜索機器人哪些頁面需要索引，哪些頁面不需要索引。Content的參數有all、none、index、noindex、follow、nofollow。默認是all。
all：文件將被檢索，且頁面上的鏈接可以被查詢；
none：文件將不被檢索，且頁面上的鏈接不可以被查詢；(和 "noindex, no follow" 起相同作用)
index：文件將被檢索；（讓robot/spider登錄）
follow：頁面上的鏈接可以被查詢；
noindex：文件將不被檢索，但頁面上的鏈接可以被查詢；(不讓robot/spider登錄)
nofollow：文件將不被檢索，頁面上的鏈接可以被查詢。(不讓robot/spider順着此頁的連接往下探找)
<Meta name="Robots" Content="All|None|Index|Noindex|Follow|Nofollow">
(2)移動設備
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
能優化移動瀏覽器的顯示。如果不是響應式網站，不要使用initial-scale或者禁用縮放。如果和initial-scale=1同時使用user-scalable=no或maximum-scale=1，則用戶將不能放大/縮小網頁來看到全部的內容。
<!-- `width=device-width` 會導致 iPhone 5 添加到主屏后以 WebApp 全屏模式打開頁面時出現黑邊 -->
width：寬度（數值 / device-width）（范圍從200 到10,000，默認為980 像素）
height：高度（數值 / device-height）（范圍從223 到10,000）
initial-scale：初始的縮放比例 （范圍從>0 到10）
minimum-scale：允許用戶縮放到的最小比例
maximum-scale：允許用戶縮放到的最大比例
user-scalable：用戶是否可以手動縮 (no,yes)
（3）忽略數字自動識別為電話號碼
<meta content="telephone=no" name="format-detection" />
（4）忽略識別郵箱
<meta content="email=no" name="format-detection" />
（5）針對手持設備優化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓
<meta name="HandheldFriendly" content="true">
（6）微軟的老式瀏覽器
<meta name="MobileOptimized" content="320">
（7） uc強制豎屏
<meta name="screen-orientation" content="portrait">
（8） QQ強制豎屏
<meta name="x5-orientation" content="portrait">
（9） UC強制全屏
<meta name="full-screen" content="yes">
（10） QQ強制全屏
<meta name="x5-fullscreen" content="true">
（11） UC應用模式
<meta name="browsermode" content="application">
（12） QQ應用模式
<meta name="x5-page-mode" content="app">
（13）windows phone 點擊無高光
<meta name="msapplication-tap-highlight" content="no">
（14）優先使用 IE 最新版本和 Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
（15）關於X-UA-Compatible
<meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->
<meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 -->
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->
(16)禁止瀏覽器從本地計算機的緩存中訪問頁面內容
<meta http-equiv="Pragma" content="no-cache">
(17)用百度打開網頁可能會對其進行轉碼（比如貼廣告），避免轉碼可添加如下meta
<meta http-equiv="Cache-Control" content="no-siteapp" />
(18)Refresh (刷新)讓網頁多長時間（秒）刷新自己，或在多長時間后讓網頁自動鏈接到其它網頁。其中的5是指停留5秒鍾后自動刷新到URL網址。
<Meta http-equiv="Refresh" Content="30">
<Meta http-equiv="Refresh" Content="5; Url=http://www.xia8.net">
(19)Expires (期限)指定網頁在緩存中的過期時間，一旦網頁過期，必須到服務器上重新調閱。
<Meta http-equiv="Expires" Content="0">
<Meta http-equiv="Expires" Content="Wed, 26 Feb 1997 08:21:57 GMT">