当前位置:首页 > Div + CSS

网页自适应宽度

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

@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
分享给朋友:

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

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

<style type="text/css">p { color: red; font-size: 12pt }p:first-letter { color: green; font-size: 200% }p:first-line { color: blue }</style&g…

CSS hack浏览器兼容一览表

CSS hack是指我们为了兼容各浏览器,而使用的特别的css定义技巧。这是国外摘来的一张CSS hack列表,显示了各浏览器对css hack的支持程度,对我们制作兼容网页非常有帮助。  …

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

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

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

IE 不支持 "min-height" 样式本站是这样解决的:.contents { ... ...; min-height:380px; ie-only:expression(this.style.height="390px"); } 兼容 IE 和 Mozilla 的 hr 定义Mozilla…

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

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

关于IE、Firefox、Opera页面呈现异同

以下的东东,有些错误,请注意. 1.document.formName.item("itemName") 问题 说明:IE下,可以 使用document.formName.item("itemName")或document.formName.elements ["elementName"];Fi…

发表评论

访客

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