网页自适应宽度

canca10年前 (2014-12-24)Div + CSS283

@media screen and (max-width:650px){html{-webkit-text-size-adjust:none}
#header{width:98%;height:59%}.sideba{width:100%;}.selectnav{display:block}
#post-list-news,.sidebar,.foot #gotop,.foot span.copyright,.post h4,#wenad,#endad,.postt,#noticet,#noticet h3,.sideba h3{display:none;}
.post .intro p{font-size:14px;line-height:22px;margin-top:5px;}
.post .intro img{width:90px;height:72px}.post .comments{top: 34px;}
.content{width:98%;float:none;overflow:hidden;margin:0 auto;background:#F8F3ED;}
#post-list-news ul li{width:98%;}.post h2 a{font-size:20px}
.post .date span.f{margin-top:4px;color:#000;text-align:center;}
#postnavi .prev,#postnavi .next,.under{font-size:16px;}
.post .con p{padding:5px 0;font-size:16px;line-height:20px;width:98%;text-indent:2em;}
}
@media screen and (max-width:500px){html{-webkit-text-size-adjust:none}
#post-list-news,.post h4,#ckepop,.like,.pagenavi,#ads-banner{display:none;}#footer,.foot{height:50px;}
.post{clear:both;margin:0px 5px 10px 5px;position:relative;overflow:hidden;background: url(images/sline.png) no-repeat 50% 100%;padding: 8px 0 20px 0;width:100%;}.under{text-indent:1.5em;text-align:justify;}
.post .intro{padding-top:0px;height: 85px;margin-top: 0px;}.post h2 a{font-size:20px}.post h1 a{font-size:20px}
.post .intro p{padding:5px 0;font-size:14px;line-height:20px;width:98%;text-indent:2em;height: 85px;}
.post .con{padding-top:5px;}.post h2 a{font-size:20px}.post h1 a{font-size:20px}
.post .con p{padding:5px 0;font-size:16px;line-height:20px;width:98%;text-indent:1.5em;margin-top:3px;}
#postnavi .prev,#postnavi .next,.under{font-size:16px;}
}
@media screen and (max-width:400px){html{-webkit-text-size-adjust:none}
#postnavi .prev,#postnavi .next,.under{font-size:16px;}
#post-list-news,.foot .copy span,.post h4,.you,.xia,.comment-titles,.comment-titles li,.comment-title{display:none;}
.post .con p{padding:5px 0;font-size:16px;line-height:20px;width:98%;text-indent:1.5em;margin-top:3px;}
.post .date{margin-right:2px;}
#DY-post-title h1,#DY-post-title h2{font-size:20px;line-height:30px;font-family:Microsoft YaHei,small;font-weight: normal;padding-bottom: 10px;padding-top: 10px;text-align: center;border-bottom-width: 1px;border-bottom-style: dashed;border-bottom-color: #CCC;} .DY-post-title h1 a{color :#450A11;}
}
@media screen and (max-width:350px){html{-webkit-text-size-adjust:none}
#postnavi .prev,#postnavi .next,.under{font-size:16px;}
#post-list-news,.post h4,.you{display:none;}.post h1 a{font-size:20px}
.post .comments{position:absolute;right:0;top:39px;color:#333;font-style:normal;width:55px;font-size:11px}
.post .comments em{font-size:14px;color:#CC0000;font-style:normal;font-weight:bold;}
.post .con p{padding:5px 0;font-size:16px;line-height:20px;width:98%;text-indent:1.5em;margin-top:3px;}
}
/*-----------------------------网页全站变灰代码-----------------------------*/
/*--html {filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(100%); }--*/

相关文章

CSS DIV超出范围加(...)

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&g...

P:first-letter P:first-line 示例

<style type="text/css">p { color: red; font-size: 12pt }p:first-letter { color: green; font-si...

列表元素ul ol li dl dt dd释义

DIV CSS网页布局中常用的列表元素ul ol li dl dt dd释义,块级元素div尽量少用,和table一样,嵌套越少越好  ol...

XHTML+CSS兼容性解决方案小集

使用XHTML+CSS构架好处不少,但也确实存在一些问题,不论是因为使用不熟练还是思路不清晰,我就先把一些我遇到的问题写在下面,省的大家四处找。 1.在mozilla firefox和IE中的BOX模...

如何处理不同浏览器之间的样式表的兼容性问题

IE 不支持 "min-height" 样式本站是这样解决的:.contents { ... ...; min-height:380px; ie-only:expression(this.style....

On having layout

英文原文在此:http://www.satzansatz.de/cssd/onhavinglayout.htm 文中所有的 layout 这个单词都未作翻译,一来本身这个单词意思就比较多,翻成啥都觉得...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。