当前位置:首页 > Div + CSS

网页自适应宽度

canca11年前 (2014-12-24)Div + CSS556

@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%); }--*/

扫描二维码推送至手机访问。

版权声明:本文由Ant.Master's Blog发布,如需转载请注明出处。

本文链接:https://iant.work/post/103.html

标签: Div + CSS
分享给朋友:

“网页自适应宽度” 的相关文章

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

使用XHTML+CSS构架好处不少,但也确实存在一些问题,不论是因为使用不熟练还是思路不清晰,我就先把一些我遇到的问题写在下面,省的大家四处找。 1.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法: div{margin:30...…

On having layout

英文原文在此:http://www.satzansatz.de/cssd/onhavinglayout.htm 文中所有的 layout 这个单词都未作翻译,一来本身这个单词意思就比较多,翻成啥都觉得别扭,二来它也是专有的属性,所以就意会一下吧。水平有限,很多地方都是模模糊糊...…

用 CSS 实现 Firefox 和 IE 都支持的 Alpha 透明效果

有的时候,为了实现一些特殊效果,需要将页面元素变透明,本文介绍的就是用 CSS 实现 Firefox 和 IE 都支持的 Alpha 透明效果。CSS: filter:alpha(opacity=50);       /* I…

[CSS Filter and Hacks] 解決IE vs Firefox等浏览器排版显示不同题

万恶IE成为大家的箭靶也不是第一天了,除了安全漏洞外,最让网页开发者头痛的就是CSS支持的问题,每次在IE上排版完后,在Firefox上看就完全不一样,在Firefox上排好则IE又乱掉了。关于IE或是其它浏览器在显示上面的问题打算整...…

IE Firefox Hack

IE都能识别*,标准浏览器(如FF)不能识别*;IE6能识别*,但不能识别 !important;IE7能识别*,也能识别 !important;FF不能识别*,但能识别 !important;例如style="*width:10px;!important width:20px;"这样在IE6下宽度…

DIV满屏显示IE6.BUG

添加如下CSS,显示OK. body{        height:100%; }…

发表评论

访客

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