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">
关于@media不生效的问题和meta总结转载于:https://www.cnblogs.com/web-chuanfa/p/9168550.html