通过@media screen控制网站在移动端显示
今天下午花点时间将本站css进行修改，通过@media screen max-width/min-width将本站在移动端浏览器下显示得更加友好。
本站在分辨率宽度680px一下显示如下
如果您在电脑端浏览本站使用的标准浏览器（ＩＥ９＋，ｆｉｒｅｆｏｘ，ｃｈｒｏｍｅ等），可以缩小浏览器窗口大小到６８０ｐｘ以下可以看到效果。
利用@media screen实现网页布局的自适应。
优点：无需插件和手机主题,对移动设备友好,能够适应各种窗口大小。只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽值。以下是针对自用主题而写的css,对宽度768以下设备只保留主要文章框架,以便在有限的空间里获得最佳阅读体验。
通过＠media screen and (max-width:680px)来判断浏览器窗口大小来重写一套css控制dom原始的显示。
/*mobile friendly*/
@media screen and (max-width:680px){
#wrapper,#top,#right,#left{width:auto !important;float:none}
#x,#elevator{display:none}
#top{height:auto;position:static;overflow:hidden;padding-bottom:5px}
#top div.logo{float:none;margin:0px auto;height:30px}
#top div.logo img{margin:0px}
#top .ad{clear:both;float:none;height:auto;margin:0px auto;overflow:auto}
#top .guider{float:none;margin:0px auto;width:390px;display:none;}
#topulGuider li{margin:0px;width:65px}
#autocomplete{margin-top:10px}
#autocomplete .w7{width:40%}
#dvBlogDetail img{width:100% !important;height:auto !important;}
#dvREF li{width:auto}
#right .dsitem .dsdetails{margin-left:40%}
#right .dsitem .vpic{width:40%}
#right .dsitem .vpic img{width:100%}
#right .dsitem .dsdetails span.time{clear:both;display:block;float:none}
#right div.attrib span.time{margin-left:0px}
#right .item .codeattrib{float:none;width:auto;overflow:hidden;margin-bottom:10px}
#right .item .codeattrib span{float:left;width:170px}
#right .item .codeattrib span#spScore{float:right}
#right .item .codeattrib span.time,#right .item .codeattrib span.dltag{padding-left:0px;background-image:none}
div.ext u{display:block}
div.postForm{overflow:auto}
div.head,div.rmk,div.postForm div.postItem,div.postForm div.fr{float:none !important;width:auto !important}
div.rmk{margin-left:85px}
#mobile_nav{display:block}
#top div.logo{width:auto;margin:0px;float:left}
}
@media screen and (max-width:400px){#autocomplete .w7{width:30%}#right .blogcontent{margin-top:70px}
#top .ad{display:none}#top .guider{width:auto;clear:both}}
忘记说最重要的一点了，一定要在ｈｅａｄ标签里面增加meta viewport，要不无效。
<meta name="viewport" content="width=device-width , initial-scale=1.0 , user-scalable=0 , minimum-scale=1.0 , maximum-scale=1.0" />
加支付宝好友偷能量挖...
原创文章，转载请注明出处：通过@media screen控制网站在移动端显示