利用@media screen实现网页布局的自适应
来源：互联网 发布：铁观音推荐 知乎 编辑：程序博客网 时间：2024/04/28 20:25
<div class="skin_detail" id="article_content"> <p><span style="color:rgb(85,85,85); font-family:verdana,"ms song",宋体,Arial,微软雅黑,Helvetica,sans-serif; line-height:16px; background-color:rgb(245,248,250)">优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小。</span><span id="articlecontent" style="color:rgb(85,85,85); font-family:verdana,"ms song",宋体,Arial,微软雅黑,Helvetica,sans-serif; line-height:16px; margin:0px; padding:0px; background-color:rgb(245,248,250)">只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽值</span></p><p style="margin:10px auto; padding-top:0px; padding-bottom:0px"><span style="margin:0px; padding:0px"><span style="margin:0px; padding:0px"></span></span></p><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"></p><h3 style="margin:15px auto 2px; padding:0px; font-size:16px; font-family:Verdana,Arial,Helvetica,sans-serif">准备工作1：设置Meta标签</h3><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; font-family:Verdana,Arial,Helvetica,sans-serif; line-height:18px">首先我们在使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果：</p><div class="snippet-container" style="margin:0px; padding:0px; font-family:Verdana,Arial,Helvetica,sans-serif; line-height:18px"><div class="sh_whitengrey snippet-wrap" style="margin:0px; padding:0px"><ol class="snippet-num" style="margin:0px; padding:0px 0px 0px 40px"><li style="margin:0px 0px 1em; padding:0px; list-style:decimal"><span class="sh_keyword" style="margin:0px; padding:0px"><meta<span class="sh_type" style="margin:0px; padding:0px"> name<span class="sh_symbol" style="margin:0px; padding:0px">=<span class="sh_string" style="margin:0px; padding:0px">"viewport"<span class="sh_type" style="margin:0px; padding:0px"> content<span class="sh_symbol" style="margin:0px; padding:0px">=<span class="sh_string" style="margin:0px; padding:0px">"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"<span class="sh_keyword" style="margin:0px; padding:0px">></span></span></span></span></span></span></span></span></li></ol></div></div><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; font-family:Verdana,Arial,Helvetica,sans-serif; line-height:18px">这段代码的几个参数解释：</p><ul class=" list-paddingleft-2" style="margin:0px 0px 0px 30px; padding:0px; word-break:break-all; font-family:Verdana,Arial,Helvetica,sans-serif; line-height:18px"><li style="margin:0px 0px 1em; padding:0px; list-style:disc"><p style="margin:10px auto; padding-top:0px; padding-bottom:0px"><span style="margin:0px; padding:0px">width = device-width：</span>宽度等于当前设备的宽度</p></li><li style="margin:0px 0px 1em; padding:0px; list-style:disc"><p style="margin:10px auto; padding-top:0px; padding-bottom:0px">height = device-height：高度等于当前设备的高度</p></li><li style="margin:0px 0px 1em; padding:0px; list-style:disc"><p style="margin:10px auto; padding-top:0px; padding-bottom:0px"><span style="margin:0px; padding:0px">initial-scale：</span>初始的缩放比例（默认设置为1.0） </p></li><li style="margin:0px 0px 1em; padding:0px; list-style:disc"><p style="margin:10px auto; padding-top:0px; padding-bottom:0px"><span style="margin:0px; padding:0px">minimum-scale：</span>允许用户缩放到的最小比例（默认设置为1.0） </p></li><li style="margin:0px 0px 1em; padding:0px; list-style:disc"><p style="margin:10px auto; padding-top:0px; padding-bottom:0px"><span style="margin:0px; padding:0px">maximum-scale：</span>允许用户缩放到的最大比例（默认设置为1.0） </p></li><li style="margin:0px 0px 1em; padding:0px; list-style:disc"><p style="margin:10px auto; padding-top:0px; padding-bottom:0px"><span style="margin:0px; padding:0px">user-scalable：</span>用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面） </p></li></ul><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; font-family:Verdana,Arial,Helvetica,sans-serif; line-height:18px"> </p><h3 style="margin:15px auto 2px; padding:0px; font-size:16px; font-family:Verdana,Arial,Helvetica,sans-serif">准备工作2：加载兼容文件JS</h3><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; font-family:Verdana,Arial,Helvetica,sans-serif; line-height:18px">因为IE8既不支持HTML5也不支持CSS3 Media，所以我们需要加载两个JS文件，来保证我们的代码实现兼容效果：</p><div class="snippet-container" style="margin:0px; padding:0px; font-family:Verdana,Arial,Helvetica,sans-serif; line-height:18px"><div class="sh_whitengrey snippet-wrap" style="margin:0px; padding:0px"><ol class="snippet-num" style="margin:0px; padding:0px 0px 0px 40px"><li style="margin:0px 0px 1em; padding:0px; list-style:decimal"><span class="sh_comment" style="margin:0px; padding:0px"><!--[if lt IE 9]></span></li><li style="margin:0px 0px 1em; padding:0px; list-style:decimal"><span class="sh_comment" style="margin:0px; padding:0px"> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script></span></li><li style="margin:0px 0px 1em; padding:0px; list-style:decimal"><span class="sh_comment" style="margin:0px; padding:0px"> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script></span></li><li style="margin:0px 0px 1em; padding:0px; list-style:decimal"><span class="sh_comment" style="margin:0px; padding:0px"><![endif]--></span></li></ol></div></div><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; font-family:Verdana,Arial,Helvetica,sans-serif; line-height:18px"> </p><h3 style="margin:15px auto 2px; padding:0px; font-size:16px; font-family:Verdana,Arial,Helvetica,sans-serif">准备工作3：设置IE渲染方式默认为最高(这部分可以选择添加也可以不添加)</h3><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; font-family:Verdana,Arial,Helvetica,sans-serif; line-height:18px">现在有很多人的IE浏览器都升级到IE9以上了，所以这个时候就有又很多诡异的事情发生了，例如现在是IE9的浏览器，但是浏览器的文档模式却是IE8:</p><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; font-family:Verdana,Arial,Helvetica,sans-serif; line-height:18px">为了防止这种情况，我们需要下面这段代码来让IE的文档模式永远都是最新的：</p><div class="snippet-container" style="margin:0px; padding:0px; font-family:Verdana,Arial,Helvetica,sans-serif; line-height:18px"><div class="sh_whitengrey snippet-wrap" style="margin:0px; padding:0px"><ol class="snippet-num" style="margin:0px; padding:0px 0px 0px 40px"><li style="margin:0px 0px 1em; padding:0px; list-style:decimal"><span class="sh_keyword" style="margin:0px; padding:0px"><meta<span class="sh_type" style="margin:0px; padding:0px"> http-equiv<span class="sh_symbol" style="margin:0px; padding:0px">=<span class="sh_string" style="margin:0px; padding:0px">"X-UA-Compatible"<span class="sh_type" style="margin:0px; padding:0px"> content<span class="sh_symbol" style="margin:0px; padding:0px">=<span class="sh_string" style="margin:0px; padding:0px">"IE=edge"<span class="sh_keyword" style="margin:0px; padding:0px">></span></span></span></span></span></span></span></span></li></ol></div></div><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; font-family:Verdana,Arial,Helvetica,sans-serif; line-height:18px"> （如果想使用固定的IE版本，可写成：<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">）</p><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; font-family:Verdana,Arial,Helvetica,sans-serif; line-height:18px"><br></p><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; font-family:Verdana,Arial,Helvetica,sans-serif; line-height:18px">不过我最近又发现了一个更给力的写法：</p><div class="snippet-container" style="margin:0px; padding:0px; font-family:Verdana,Arial,Helvetica,sans-serif; line-height:18px"><div class="sh_whitengrey snippet-wrap" style="margin:0px; padding:0px"><ol class="snippet-num" style="margin:0px; padding:0px 0px 0px 40px"><li style="margin:0px 0px 1em; padding:0px; list-style:decimal"><span class="sh_keyword" style="margin:0px; padding:0px"><meta<span class="sh_type" style="margin:0px; padding:0px"> http-equiv<span class="sh_symbol" style="margin:0px; padding:0px">=<span class="sh_string" style="margin:0px; padding:0px">"X-UA-Compatible"<span class="sh_type" style="margin:0px; padding:0px"> content<span class="sh_symbol" style="margin:0px; padding:0px">=<span class="sh_string" style="margin:0px; padding:0px">"IE=Edge，chrome=1"<span class="sh_keyword" style="margin:0px; padding:0px">></span></span></span></span></span></span></span></span></li></ol></div></div><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; font-family:Verdana,Arial,Helvetica,sans-serif; line-height:18px">怎么这段代码后面加了一个<span style="margin:0px; padding:0px">chrome=1</span>，这个<a target="_blank" title="谷歌瀏覽器內嵌框架" href="http://zh.wikipedia.org/wiki/Google_Chrome_Frame" style="margin:0px; padding:0px; color:black"><span style="margin:0px; padding:0px">Google Chrome Frame（谷歌内嵌浏览器框架GCF）</span></a>，如果有的用户电脑里面装了这个chrome的插件，就可以让电脑里面的IE不管是哪个版本的都可以使用<span style="margin:0px; padding:0px">Webkit</span>引擎及<span style="margin:0px; padding:0px">V8</span>引擎进行排版及运算，无比给力，不过如果用户没装这个插件，那这段代码就会让IE以最高的文档模式展现效果。这段代码我还是建议你们用上，不过不用也是可以的。</p><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; font-family:Verdana,Arial,Helvetica,sans-serif; line-height:18px"> </p><h3 style="margin:15px auto 2px; padding:0px; font-size:16px; font-family:Verdana,Arial,Helvetica,sans-serif">进入CSS3 Media写法</h3><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; font-family:Verdana,Arial,Helvetica,sans-serif; line-height:18px">我们先来看下下面这段代码，估计很多人在响应式的网站CSS很经常看到类似下面的这段代码：</p><div class="snippet-container" style="margin:0px; padding:0px; font-family:Verdana,Arial,Helvetica,sans-serif; line-height:18px"><div class="sh_acid snippet-wrap" style="margin:0px; padding:0px"><ol class="snippet-num" style="margin:0px; padding:0px 0px 0px 40px"><li style="margin:0px 0px 1em; padding:0px; list-style:decimal">@media screen and <span class="sh_symbol" style="margin:0px; padding:0px">(max<span class="sh_symbol" style="margin:0px; padding:0px">-width<span class="sh_symbol" style="margin:0px; padding:0px">: 960px<span class="sh_symbol" style="margin:0px; padding:0px">)<span class="sh_cbracket" style="margin:0px; padding:0px">{</span></span></span></span></span></li><li style="margin:0px 0px 1em; padding:0px; list-style:decimal"> <span class="sh_value" style="margin:0px; padding:0px">body{</span></li><li style="margin:0px 0px 1em; padding:0px; list-style:decimal"> <span class="sh_property" style="margin:0px; padding:0px">background: <span class="sh_string" style="margin:0px; padding:0px">#000;</span></span></li><li style="margin:0px 0px 1em; padding:0px; list-style:decimal"> <span class="sh_cbracket" style="margin:0px; padding:0px">}</span></li><li style="margin:0px 0px 1em; padding:0px; list-style:decimal">}</li></ol></div></div><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; font-family:Verdana,Arial,Helvetica,sans-serif; line-height:18px">这个应该算是一个<span style="margin:0px; padding:0px">media</span>的一个标准写法，上面这段CSS代码意思是：当页面<span style="margin:0px; padding:0px">小于960px</span>的时候执行它下面的CSS.这个应该没有太大疑问。</p><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; font-family:Verdana,Arial,Helvetica,sans-serif; line-height:18px"> </p><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; font-family:Verdana,Arial,Helvetica,sans-serif; line-height:18px">应该有人会发现上面这段代码里面有个<span style="margin:0px; padding:0px">screen</span>，他的意思是在告知设备在打印页面时使用<a target="_blank" title="衬线字体" href="http://baike.baidu.com/link?url=FOnnUbOa6X590ao9mYca7Rgz_z5bLBtmMV0qwimHDZIsaZFTC5vztLLlPvOnzCo5hGU5loIN9zhxJDBBRaQeTa" style="margin:0px; padding:0px; color:black">衬线字体</a>，在屏幕上显示时用无衬线字体。但是目前我发现很多网站都会直接省略screen,因为你的网站可能不需要考虑用户去打印时，你可以直接这样写：</p><div class="snippet-container" style="margin:0px; padding:0px; font-family:Verdana,Arial,Helvetica,sans-serif; line-height:18px"><div class="sh_acid snippet-wrap" style="margin:0px; padding:0px"><ol class="snippet-num" style="margin:0px; padding:0px 0px 0px 40px"><li style="margin:0px 0px 1em; padding:0px; list-style:decimal">@media <span class="sh_symbol" style="margin:0px; padding:0px">(max<span class="sh_symbol" style="margin:0px; padding:0px">-width<span class="sh_symbol" style="margin:0px; padding:0px">: 960px<span class="sh_symbol" style="margin:0px; padding:0px">)<span class="sh_cbracket" style="margin:0px; padding:0px">{</span></span></span></span></span></li><li style="margin:0px 0px 1em; padding:0px; list-style:decimal"> <span class="sh_value" style="margin:0px; padding:0px">body{</span></li><li style="margin:0px 0px 1em; padding:0px; list-style:decimal"> <span class="sh_property" style="margin:0px; padding:0px">background: <span class="sh_string" style="margin:0px; padding:0px">#000;</span></span></li><li style="margin:0px 0px 1em; padding:0px; list-style:decimal"> <span class="sh_cbracket" style="margin:0px; padding:0px">}</span></li><li style="margin:0px 0px 1em; padding:0px; list-style:decimal">}</li></ol></div></div><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; font-family:Verdana,Arial,Helvetica,sans-serif; line-height:18px"> </p><h3 style="margin:15px auto 2px; padding:0px; font-size:16px; font-family:Verdana,Arial,Helvetica,sans-serif">CSS2 Media用法</h3><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; font-family:Verdana,Arial,Helvetica,sans-serif; line-height:18px">其实并不是只有CSS3才支持<span style="margin:0px; padding:0px">Media</span>的用法，早在CSS2开始就已经支持Media，具体用法，就是在HTML页面的<span style="margin:0px; padding:0px">head</span>标签中插入如下的一段代码：</p><div class="snippet-container" style="margin:0px; padding:0px; font-family:Verdana,Arial,Helvetica,sans-serif; line-height:18px"><div class="sh_acid snippet-wrap" style="margin:0px; padding:0px"><ol class="snippet-num" style="margin:0px; padding:0px 0px 0px 40px"><li style="margin:0px 0px 1em; padding:0px; list-style:decimal"><span class="sh_symbol" style="margin:0px; padding:0px"><link rel<span class="sh_symbol" style="margin:0px; padding:0px">="stylesheet" type<span class="sh_symbol" style="margin:0px; padding:0px">="text<span class="sh_symbol" style="margin:0px; padding:0px">/css" media<span class="sh_symbol" style="margin:0px; padding:0px">="screen" href<span class="sh_symbol" style="margin:0px; padding:0px">="style<span class="sh_selector" style="margin:0px; padding:0px">.css"<span class="sh_symbol" style="margin:0px; padding:0px">></span></span></span></span></span></span></span></span></li></ol></div></div><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; font-family:Verdana,Arial,Helvetica,sans-serif; line-height:18px"> </p><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; font-family:Verdana,Arial,Helvetica,sans-serif; line-height:18px">上面其实是CSS2实现的衬线用法，那CSS2的<span style="margin:0px; padding:0px">media</span>难道就只能支持上面这一个功能吗？答案当然不是，他还有很多用法。</p><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; font-family:Verdana,Arial,Helvetica,sans-serif; line-height:18px"> </p><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; font-family:Verdana,Arial,Helvetica,sans-serif; line-height:18px">例如我们想知道现在的移动设备是不是纵向放置的显示屏，可以这样写：</p><div class="snippet-container" style="margin:0px; padding:0px; font-family:Verdana,Arial,Helvetica,sans-serif; line-height:18px"><div class="sh_acid snippet-wrap" style="margin:0px; padding:0px"><ol class="snippet-num" style="margin:0px; padding:0px 0px 0px 40px"><li style="margin:0px 0px 1em; padding:0px; list-style:decimal"><span class="sh_symbol" style="margin:0px; padding:0px"><link rel<span class="sh_symbol" style="margin:0px; padding:0px">="stylesheet" type<span class="sh_symbol" style="margin:0px; padding:0px">="text<span class="sh_symbol" style="margin:0px; padding:0px">/css" media<span class="sh_symbol" style="margin:0px; padding:0px">="screen and <span class="sh_symbol" style="margin:0px; padding:0px">(orientation<span class="sh_symbol" style="margin:0px; padding:0px">:portrait<span class="sh_symbol" style="margin:0px; padding:0px">)" href<span class="sh_symbol" style="margin:0px; padding:0px">="style<span class="sh_selector" style="margin:0px; padding:0px">.css"<span class="sh_symbol" style="margin:0px; padding:0px">></span></span></span></span></span></span></span></span></span></span></span></li></ol></div></div><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; font-family:Verdana,Arial,Helvetica,sans-serif; line-height:18px"> </p><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; font-family:Verdana,Arial,Helvetica,sans-serif; line-height:18px">我们把第一段的代码也用CSS2来实现，让它一样可以让页面宽度小于960的执行指定的样式文件：</p><div class="snippet-container" style="margin:0px; padding:0px; font-family:Verdana,Arial,Helvetica,sans-serif; line-height:18px"><div class="sh_acid snippet-wrap" style="margin:0px; padding:0px"><ol class="snippet-num" style="margin:0px; padding:0px 0px 0px 40px"><li style="margin:0px 0px 1em; padding:0px; list-style:decimal"><span class="sh_symbol" style="margin:0px; padding:0px"><link rel<span class="sh_symbol" style="margin:0px; padding:0px">="stylesheet" type<span class="sh_symbol" style="margin:0px; padding:0px">="text<span class="sh_symbol" style="margin:0px; padding:0px">/css" media<span class="sh_symbol" style="margin:0px; padding:0px">="screen and <span class="sh_symbol" style="margin:0px; padding:0px">(max<span class="sh_symbol" style="margin:0px; padding:0px">-width<span class="sh_symbol" style="margin:0px; padding:0px">:960px<span class="sh_symbol" style="margin:0px; padding:0px">)" href<span class="sh_symbol" style="margin:0px; padding:0px">="style<span class="sh_selector" style="margin:0px; padding:0px">.css"<span class="sh_symbol" style="margin:0px; padding:0px">></span></span></span></span></span></span></span></span></span></span></span></span></li></ol></div></div><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; font-family:Verdana,Arial,Helvetica,sans-serif; line-height:18px"> </p><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; font-family:Verdana,Arial,Helvetica,sans-serif; line-height:18px">既然CSS2可以实现CSS的这个效果为什么不用这个方法呢，很多人应该会问，但是上面这个方法，最大的弊端是他会增加页面http的请求次数，增加了页面负担，我们用CSS3把样式都写在一个文件里面才是最佳的方法。</p><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; font-family:Verdana,Arial,Helvetica,sans-serif; line-height:18px"> </p><h3 style="margin:15px auto 2px; padding:0px; font-size:16px; font-family:Verdana,Arial,Helvetica,sans-serif">回归CSS3 Media</h3><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; font-family:Verdana,Arial,Helvetica,sans-serif; line-height:18px">上面我们大概讲了下CSS2的媒体查询用法，现在我们重新回到CSS3的媒体查询，在第一段代码上面我用的是小于960px的尺寸的写法，那现在我们来实现<span style="margin:0px; padding:0px">等于960px</span>尺寸的代码：</p><div class="snippet-container" style="margin:0px; padding:0px; font-family:Verdana,Arial,Helvetica,sans-serif; line-height:18px"><div class="sh_acid snippet-wrap" style="margin:0px; padding:0px"><ol class="snippet-num" style="margin:0px; padding:0px 0px 0px 40px"><li style="margin:0px 0px 1em; padding:0px; list-style:decimal">@media screen and <span class="sh_symbol" style="margin:0px; padding:0px">(max<span class="sh_symbol" style="margin:0px; padding:0px">-device<span class="sh_symbol" style="margin:0px; padding:0px">-width<span class="sh_symbol" style="margin:0px; padding:0px">:960px<span class="sh_symbol" style="margin:0px; padding:0px">)<span class="sh_cbracket" style="margin:0px; padding:0px">{</span></span></span></span></span></span></li><li style="margin:0px 0px 1em; padding:0px; list-style:decimal"> <span class="sh_value" style="margin:0px; padding:0px">body{</span></li><li style="margin:0px 0px 1em; padding:0px; list-style:decimal"> <span class="sh_property" style="margin:0px; padding:0px">background:<span class="sh_value" style="margin:0px; padding:0px">red;</span></span></li><li style="margin:0px 0px 1em; padding:0px; list-style:decimal"> <span class="sh_cbracket" style="margin:0px; padding:0px">}</span></li><li style="margin:0px 0px 1em; padding:0px; list-style:decimal">}</li></ol></div></div><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; font-family:Verdana,Arial,Helvetica,sans-serif; line-height:18px"> </p><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; font-family:Verdana,Arial,Helvetica,sans-serif; line-height:18px">然后就是当浏览器尺寸<span style="margin:0px; padding:0px">大于960px</span>时候的代码了：</p><div class="snippet-container" style="margin:0px; padding:0px; font-family:Verdana,Arial,Helvetica,sans-serif; line-height:18px"><div class="sh_acid snippet-wrap" style="margin:0px; padding:0px"><ol class="snippet-num" style="margin:0px; padding:0px 0px 0px 40px"><li style="margin:0px 0px 1em; padding:0px; list-style:decimal">@media screen and <span class="sh_symbol" style="margin:0px; padding:0px">(min<span class="sh_symbol" style="margin:0px; padding:0px">-width<span class="sh_symbol" style="margin:0px; padding:0px">:960px<span class="sh_symbol" style="margin:0px; padding:0px">)<span class="sh_cbracket" style="margin:0px; padding:0px">{</span></span></span></span></span></li><li style="margin:0px 0px 1em; padding:0px; list-style:decimal"> <span class="sh_value" style="margin:0px; padding:0px">body{</span></li><li style="margin:0px 0px 1em; padding:0px; list-style:decimal"> <span class="sh_property" style="margin:0px; padding:0px">background:<span class="sh_value" style="margin:0px; padding:0px">orange;</span></span></li><li style="margin:0px 0px 1em; padding:0px; list-style:decimal"> <span class="sh_cbracket" style="margin:0px; padding:0px">}</span></li><li style="margin:0px 0px 1em; padding:0px; list-style:decimal">}</li></ol></div></div><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; font-family:Verdana,Arial,Helvetica,sans-serif; line-height:18px"> </p><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; font-family:Verdana,Arial,Helvetica,sans-serif; line-height:18px">我们还可以混合使用上面的用法：</p><div class="snippet-container" style="margin:0px; padding:0px; font-family:Verdana,Arial,Helvetica,sans-serif; line-height:18px"><div class="sh_acid snippet-wrap" style="margin:0px; padding:0px"><ol class="snippet-num" style="margin:0px; padding:0px 0px 0px 40px"><li style="margin:0px 0px 1em; padding:0px; list-style:decimal">@media screen and <span class="sh_symbol" style="margin:0px; padding:0px">(min<span class="sh_symbol" style="margin:0px; padding:0px">-width<span class="sh_symbol" style="margin:0px; padding:0px">:960px<span class="sh_symbol" style="margin:0px; padding:0px">) and <span class="sh_symbol" style="margin:0px; padding:0px">(max<span class="sh_symbol" style="margin:0px; padding:0px">-width<span class="sh_symbol" style="margin:0px; padding:0px">:1200px<span class="sh_symbol" style="margin:0px; padding:0px">)<span class="sh_cbracket" style="margin:0px; padding:0px">{</span></span></span></span></span></span></span></span></span></li><li style="margin:0px 0px 1em; padding:0px; list-style:decimal"> <span class="sh_value" style="margin:0px; padding:0px">body{</span></li><li style="margin:0px 0px 1em; padding:0px; list-style:decimal"> <span class="sh_property" style="margin:0px; padding:0px">background:<span class="sh_value" style="margin:0px; padding:0px">yellow;</span></span></li><li style="margin:0px 0px 1em; padding:0px; list-style:decimal"> <span class="sh_cbracket" style="margin:0px; padding:0px">}</span></li><li style="margin:0px 0px 1em; padding:0px; list-style:decimal">}</li></ol></div></div><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; font-family:Verdana,Arial,Helvetica,sans-serif; line-height:18px">上面的这段代码的意思是当页面宽度大于960px小于1200px的时候执行下面的CSS。</p><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; font-family:Verdana,Arial,Helvetica,sans-serif; line-height:18px"> </p><h3 style="margin:15px auto 2px; padding:0px; font-size:16px; font-family:Verdana,Arial,Helvetica,sans-serif">Media所有参数汇总</h3><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; font-family:Verdana,Arial,Helvetica,sans-serif; line-height:18px">以上就是我们最常需要用到的媒体查询器的三个特性，大于，等于，小于的写法。媒体查询器的全部功能肯定不止这三个功能，下面是我总结的它的一些参数用法解释：</p><ul class=" list-paddingleft-2" style="margin:0px 0px 0px 30px; padding:0px; word-break:break-all; font-family:Verdana,Arial,Helvetica,sans-serif; line-height:18px"><li style="margin:0px 0px 1em; padding:0px; list-style:disc"><p style="margin:10px auto; padding-top:0px; padding-bottom:0px"><span style="margin:0px; padding:0px">width:</span>浏览器可视宽度。</p></li><li style="margin:0px 0px 1em; padding:0px; list-style:disc"><p style="margin:10px auto; padding-top:0px; padding-bottom:0px"><span style="margin:0px; padding:0px">height</span>:浏览器可视高度。</p></li><li style="margin:0px 0px 1em; padding:0px; list-style:disc"><p style="margin:10px auto; padding-top:0px; padding-bottom:0px"><span style="margin:0px; padding:0px">device-width</span>:设备屏幕的宽度。</p></li><li style="margin:0px 0px 1em; padding:0px; list-style:disc"><p style="margin:10px auto; padding-top:0px; padding-bottom:0px"><span style="margin:0px; padding:0px">device-height</span>:设备屏幕的高度。</p></li><li style="margin:0px 0px 1em; padding:0px; list-style:disc"><p style="margin:10px auto; padding-top:0px; padding-bottom:0px"><span style="margin:0px; padding:0px">orientation</span>:检测设备目前处于横向还是纵向状态。</p></li><li style="margin:0px 0px 1em; padding:0px; list-style:disc"><p style="margin:10px auto; padding-top:0px; padding-bottom:0px"><span style="margin:0px; padding:0px">aspect-ratio</span>:检测浏览器可视宽度和高度的比例。(例如：aspect-ratio:16/9)</p></li><li style="margin:0px 0px 1em; padding:0px; list-style:disc"><p style="margin:10px auto; padding-top:0px; padding-bottom:0px"><span style="margin:0px; padding:0px">device-aspect-ratio</span>:检测设备的宽度和高度的比例。</p></li><li style="margin:0px 0px 1em; padding:0px; list-style:disc"><p style="margin:10px auto; padding-top:0px; padding-bottom:0px"><span style="margin:0px; padding:0px">color</span>:检测颜色的位数。（例如：min-color:32就会检测设备是否拥有32位颜色）</p></li><li style="margin:0px 0px 1em; padding:0px; list-style:disc"><p style="margin:10px auto; padding-top:0px; padding-bottom:0px"><span style="margin:0px; padding:0px">color-inde</span>x:检查设备颜色索引表中的颜色，他的值不能是负数。</p></li><li style="margin:0px 0px 1em; padding:0px; list-style:disc"><p style="margin:10px auto; padding-top:0px; padding-bottom:0px"><span style="margin:0px; padding:0px">monochrome</span>:检测单色楨缓冲区域中的每个像素的位数。（这个太高级，估计咱很少会用的到）</p></li><li style="margin:0px 0px 1em; padding:0px; list-style:disc"><p style="margin:10px auto; padding-top:0px; padding-bottom:0px"><span style="margin:0px; padding:0px">resolution</span>:检测屏幕或打印机的分辨率。(例如：min-resolution:300dpi或min-resolution:118dpcm)。</p></li><li style="margin:0px 0px 1em; padding:0px; list-style:disc"><p style="margin:10px auto; padding-top:0px; padding-bottom:0px"><span style="margin:0px; padding:0px">grid</span>：检测输出的设备是网格的还是位图设备。</p></li></ul><br><hr style="margin:0px; padding:0px; color:rgb(85,85,85); font-family:verdana,'ms song',宋体,Arial,微软雅黑,Helvetica,sans-serif; line-height:16px; background-color:rgb(245,248,250)"><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; color:rgb(85,85,85); font-family:verdana,'ms song',宋体,Arial,微软雅黑,Helvetica,sans-serif; line-height:16px; background-color:rgb(245,248,250)"><span style="margin:0px; padding:0px"><br></span></p><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); font-family:'Microsoft Yahei',微软雅黑,arial,宋体,sans-serif; font-size:16px; line-height:28px; text-align:justify">注意下顺序，如果你把@media (min-width: 768px)写在了下面那么很悲剧，</p><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); font-family:'Microsoft Yahei',微软雅黑,arial,宋体,sans-serif; font-size:16px; line-height:28px; text-align:justify">@media (min-width: 1200){ //>=1200的设备 }</p><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); font-family:'Microsoft Yahei',微软雅黑,arial,宋体,sans-serif; font-size:16px; line-height:28px; text-align:justify">@media (min-width: 992px){ //>=992的设备 }</p><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); font-family:'Microsoft Yahei',微软雅黑,arial,宋体,sans-serif; font-size:16px; line-height:28px; text-align:justify">@media (min-width: 768px){ //>=768的设备 }</p><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); font-family:'Microsoft Yahei',微软雅黑,arial,宋体,sans-serif; font-size:16px; line-height:28px; text-align:justify">因为如果是1440,由于1440>768那么你的1200就会失效。</p><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; font-family:"Microsoft Yahei",微软雅黑,arial,宋体,sans-serif; font-size:16px; line-height:28px; text-align:justify"><span style="color:#ff0000">所以我们用min-width时，小的放上面大的在下面，同理如果是用max-width那么就是大的在上面，小的在下面</span></p><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); font-family:'Microsoft Yahei',微软雅黑,arial,宋体,sans-serif; font-size:16px; line-height:28px; text-align:justify">@media (max-width: 1199){ //<=1199的设备 }</p><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); font-family:'Microsoft Yahei',微软雅黑,arial,宋体,sans-serif; font-size:16px; line-height:28px; text-align:justify">@media (max-width: 991px){ //<=991的设备 }</p><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); font-family:'Microsoft Yahei',微软雅黑,arial,宋体,sans-serif; font-size:16px; line-height:28px; text-align:justify">@media (max-width: 767px){ //<=768的设备 }</p><br><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; color:rgb(85,85,85); font-family:verdana,'ms song',宋体,Arial,微软雅黑,Helvetica,sans-serif; line-height:16px; background-color:rgb(245,248,250)"><span style="margin:0px; padding:0px">1280<span id="articlecontent" style="margin:0px; padding:0px">分辨率</span>以上（大于1200px）</span></p><div class="cnblogs_code" style="margin:5px 0px; padding:5px; border:1px solid rgb(204,204,204); overflow:auto; line-height:16px; font-family:'Courier New'!important; background-color:rgb(245,245,245)"><pre style="margin-top:0px; margin-bottom:0px; padding:0px; white-space:pre-wrap; word-wrap:break-word; font-family:'Courier New'!important"><span style="margin:0px; padding:0px; line-height:1.5!important">@media screen and (min-width:1200px){ #page{ width: 1100px; }#content,.div1{width: 730px;}#secondary{width:310px}}</span></pre></div><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; color:rgb(85,85,85); font-family:verdana,'ms song',宋体,Arial,微软雅黑,Helvetica,sans-serif; line-height:16px; background-color:rgb(245,248,250)"> </p><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; color:rgb(85,85,85); font-family:verdana,'ms song',宋体,Arial,微软雅黑,Helvetica,sans-serif; line-height:16px; background-color:rgb(245,248,250)"><span id="articlecontent" style="margin:0px; padding:0px">1100分辨率（大于960px，小于1199px）</span></p><div class="cnblogs_code" style="margin:5px 0px; padding:5px; border:1px solid rgb(204,204,204); overflow:auto; line-height:16px; font-family:'Courier New'!important; background-color:rgb(245,245,245)"><pre style="margin-top:0px; margin-bottom:0px; padding:0px; white-space:pre-wrap; word-wrap:break-word; font-family:'Courier New'!important"><span style="margin:0px; padding:0px; line-height:1.5!important">@media screen and (min-width: 960px) and (max-width: 1199px) { #page{ width: 960px; }#content,.div1{width: 650px;}#secondary{width:250px}select{max-width:200px}}</span></pre></div><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; color:rgb(85,85,85); font-family:verdana,'ms song',宋体,Arial,微软雅黑,Helvetica,sans-serif; line-height:16px; background-color:rgb(245,248,250)"> </p><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; color:rgb(85,85,85); font-family:verdana,'ms song',宋体,Arial,微软雅黑,Helvetica,sans-serif; line-height:16px; background-color:rgb(245,248,250)"><span id="articlecontent" style="margin:0px; padding:0px">880分辨率（大于768px，小于959px）</span></p><div class="cnblogs_code" style="margin:5px 0px; padding:5px; border:1px solid rgb(204,204,204); overflow:auto; line-height:16px; font-family:'Courier New'!important; background-color:rgb(245,245,245)"><pre style="margin-top:0px; margin-bottom:0px; padding:0px; white-space:pre-wrap; word-wrap:break-word; font-family:'Courier New'!important"><span style="margin:0px; padding:0px; line-height:1.5!important">@media screen and (min-width: 768px) and (max-width: 959px) { #page{ width: 900px; }#content,.div1{width: 620px;}#secondary{width:220px}select{max-width:180px}}</span></pre></div><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; color:rgb(85,85,85); font-family:verdana,'ms song',宋体,Arial,微软雅黑,Helvetica,sans-serif; line-height:16px; background-color:rgb(245,248,250)"> </p><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; color:rgb(85,85,85); font-family:verdana,'ms song',宋体,Arial,微软雅黑,Helvetica,sans-serif; line-height:16px; background-color:rgb(245,248,250)"><span id="articlecontent" style="margin:0px; padding:0px">720分辨率（大于480px，小于767px）</span></p><div class="cnblogs_code" style="margin:5px 0px; padding:5px; border:1px solid rgb(204,204,204); overflow:auto; line-height:16px; font-family:'Courier New'!important; background-color:rgb(245,245,245)"><pre style="margin-top:0px; margin-bottom:0px; padding:0px; white-space:pre-wrap; word-wrap:break-word; font-family:'Courier New'!important"><span style="margin:0px; padding:0px; line-height:1.5!important">@media only screen and (min-width: 480px) and (max-width: 767px){ #page{ width: 450px; }#content,.div1{width: 420px;position: relative; }#secondary{display:none}#access{width: 450px; }#access a {padding-right:5px}#access a img{display:none}#rss{display:none}#branding #s{display:none}}</span></pre></div><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; color:rgb(85,85,85); font-family:verdana,'ms song',宋体,Arial,微软雅黑,Helvetica,sans-serif; line-height:16px; background-color:rgb(245,248,250)"> </p><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; color:rgb(85,85,85); font-family:verdana,'ms song',宋体,Arial,微软雅黑,Helvetica,sans-serif; line-height:16px; background-color:rgb(245,248,250)"><span id="articlecontent" style="margin:0px; padding:0px">440分辨率以下（小于479px）</span></p><div class="cnblogs_code" style="margin:5px 0px; padding:5px; border:1px solid rgb(204,204,204); overflow:auto; line-height:16px; font-family:'Courier New'!important; background-color:rgb(245,245,245)"><pre style="margin-top:0px; margin-bottom:0px; padding:0px; white-space:pre-wrap; word-wrap:break-word; font-family:'Courier New'!important"><span style="margin:0px; padding:0px; line-height:1.5!important">@media only screen and (max-width: 479px) { #page{ width: 300px; }#content,.div1{width: 300px;}#secondary{display:none}#access{width: 330px;} #access a {padding-right:10px;padding-left:10px}#access a img{display:none}#rss{display:none}#branding #s{display:none}#access ul ul a{width:100px}}</span></pre></div><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; color:rgb(85,85,85); font-family:verdana,'ms song',宋体,Arial,微软雅黑,Helvetica,sans-serif; line-height:16px; background-color:rgb(245,248,250)"> </p><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; color:rgb(85,85,85); font-family:verdana,'ms song',宋体,Arial,微软雅黑,Helvetica,sans-serif; line-height:16px; background-color:rgb(245,248,250)"></p><div class="dp-highlighter bg_css"><div class="bar"><div class="tools"><b>[css]</b> <a href="#" class="ViewSource" title="view plain" onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;">view plain</a><span class="tracking-ad" data-mod="popu_168"> <a href="#" class="CopyToClipboard" title="copy" onclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;" target="_blank">copy</a><div style="position: absolute; left: 462px; top: 4857px; width: 16px; height: 16px; z-index: 99;"><embed id="ZeroClipboardMovie_1" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="16" height="16" name="ZeroClipboardMovie_1" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=1&width=16&height=16" wmode="transparent"></div></span><span class="tracking-ad" data-mod="popu_169"> <a href="#" class="PrintSource" title="print" onclick="dp.sh.Toolbar.Command('PrintSource',this);return false;" target="_blank">print</a></span><a href="#" class="About" title="?" onclick="dp.sh.Toolbar.Command('About',this);return false;">?</a><span class="tracking-ad" data-mod="popu_167"><a href="https://code.csdn.net/snippets/2108991" target="_blank" title="在CODE上查看代码片" style="text-indent:0;"><img src="https://code.csdn.net/assets/CODE_ico.png" width="12" height="12" alt="在CODE上查看代码片" style="position:relative;top:1px;left:2px;"></a></span><span class="tracking-ad" data-mod="popu_170"><a href="https://code.csdn.net/snippets/2108991/fork" target="_blank" title="派生到我的代码片" style="text-indent:0;"><img src="https://code.csdn.net/assets/ico_fork.svg" width="12" height="12" alt="派生到我的代码片" style="position:relative;top:2px;left:2px;"></a></span></div></div><ol start="1" class="dp-css"><li class="alt"><span><span class="comment">/* 竖屏 */</span><span> </span></span></li><li class=""><span>@media <span class="value">screen</span><span> and (orientation: </span><span class="value">portrait</span><span>) and (</span><span class="keyword">max-width</span><span>: </span><span class="value">720px</span><span>) { 对应样式 } </span></span></li><li class="alt"><span> </span></li><li class=""><span><span class="comment">/* 横屏 */</span><span> </span></span></li><li class="alt"><span>@media <span class="value">screen</span><span> and (orientation: </span><span class="value">landscape</span><span>) { 对应样式 } </span></span></li></ol><div class="save_code tracking-ad" data-mod="popu_249"><a href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png"></a></div></div><pre code_snippet_id="2108991" snippet_file_name="blog_20170109_1_6970712" name="code" class="css" style="display: none;">/* 竖屏 */@media screen and (orientation: portrait) and (max-width: 720px) { 对应样式 }/* 横屏 */@media screen and (orientation: landscape) { 对应样式 }</pre><br><br><p></p><span id="articlecontent" style="margin:0px; padding:0px; color:rgb(85,85,85); font-family:verdana,'ms song',宋体,Arial,微软雅黑,Helvetica,sans-serif; line-height:16px; background-color:rgb(245,248,250)"></span><div class="content-list-text" style="text-align:justify"><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px">上面的代码中用到了screen ，他的意思是在告知设备在打印页面时使用<a target="_blank" href="http://baike.baidu.com/link?url=FOnnUbOa6X590ao9mYca7Rgz_z5bLBtmMV0qwimHDZIsaZFTC5vztLLlPvOnzCo5hGU5loIN9zhxJDBBRaQeTa" title="衬线字体" style="margin:0px; padding:0px; border:0px; vertical-align:baseline">衬线字体</a>，在屏幕上显示时用无衬线字体。但是目前我发现很多网站都会直接省略screen,因为你的网站可能不需要考虑用户去打印时。</p><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"><br></p><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> </p><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px">PC端按屏幕宽度大小排序（主流的用橙色标明）<br><br>分辨率 比例 | 设备尺寸<br><br>1024*500 （8.9寸）<br>1024*768 （比例4：3 | 10.4寸、12.1寸、14.1寸、15寸; ）<br>1280*800（16：10 |15.4寸）<br>1280*1024(比例：5：4 | 14.1寸、15.0寸)<br>1280*854(比例：15：10 | 15.2）<br>1366*768 (比例：16：9 | 不常见）<br>1440*900 （16：10 17寸 仅苹果用）<br>1440*1050（比例：5：4 | 14.1寸、15.0寸）<br>1600*1024（14：9 不常见）<br>1600*1200 （4：3 | 15、16.1）<br>1680*1050（16：10 | 15.4寸、20.0寸）<br>1920*1200 (23寸）<br><br>通过上面的电脑屏蔽及尺寸的例表上我们得到了几个宽度<br>1024 1280 1366 1440 1680 1920 <br><br>CSS代码<br><br>@media (min-width: 1024px){<br> body{font-size: 18px}<br>} /*>=1024的设备*/<br>@media (min-width: 1100px) {<br> body{font-size: 20px}<br>} /*>=1024的设备*/<br>@media (min-width: 1280px) {<br> body{font-size: 22px;}<br>} <br>@media (min-width: 1366px) {<br> body{font-size: 24px;}<br>} <br>@media (min-width: 1440px) {<br> body{font-size: 25px !important;}<br>} <br>@media (min-width: 1680px) {<br> body{font-size: 28px;}<br>} <br>@media (min-width: 1920px) {<br> body{font-size: 33px;}<br>} <br></p><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"><br></p><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"><img src="http://img.blog.csdn.net/20170109135106984?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvSW51eWFzaGExMTIx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""><br></p><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"><br></p><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px">转载自：<a target="_blank" href="http://www.cnblogs.com/xcxc/p/4531846.html">http://www.cnblogs.com/xcxc/p/4531846.html</a></p><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <a target="_blank" href="http://www.cnblogs.com/zhaodifont/p/3858657.html">http://www.cnblogs.com/zhaodifont/p/3858657.html</a><br></p><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <a target="_blank" href="http://www.bubuko.com/infodetail-1045273.html">http://www.bubuko.com/infodetail-1045273.html</a><br></p></div><link rel="stylesheet" href="http://static.blog.csdn.net/public/res-min/markdown_views.css?v=1.0"> </div>
0 0
- 利用@media screen实现网页布局的自适应
- 利用@media screen实现网页布局的自适应
- 利用@media screen实现网页布局的自适应
- 利用@media screen实现网页布局的自适应
- CSS3 利用@media screen实现网页布局的自适应
- 利用@media screen实现网页布局的自适应
- 利用@media screen实现网页布局的自适应
- 利用@media screen实现网页布局的自适应
- 利用@media screen实现网页布局的自适应
- 利用@media screen实现网页布局的自适应
- 利用@media screen实现网页布局的自适应
- 利用@media screen实现网页布局的自适应
- 利用@media screen实现网页布局的自适应
- 利用@media screen实现网页布局的自适应
- 利用@media screen实现网页布局的自适应
- 利用@media screen实现网页布局的自适应
- 利用@media screen实现网页布局的自适应
- 利用@media screen实现网页布局的自适应
- Eclipse 使用 VS快捷键
- Linux cannot remove is a directory 解决办法
- Easy Go
- PHP图像处理之imagecreate、imagedestroy函数介绍
- 如何在OC类里 调用swift类
- 利用@media screen实现网页布局的自适应
- git checkout ： You have local changes cannot switch branches&Entry would be overwritten by mege
- mycat分表自增 db实现
- android ImageLoader框架按需求修改——以backgroud方式展示在ImageView
- Elasticsearch 默认配置 IK 及 Java AnalyzeRequestBuilder 使用
- 项目经理学习笔记
- break和continue
- POI3.10读取xlsx，并解析日期类型数据 Demo
- 多线程学习笔记2
