当前位置:首页 > Div + CSS

网页自适应宽度

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

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

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

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

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

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

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

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

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

IE Firefox Hack

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

Opera hack

@media all and (min-width:0px){  选择符 {样式内容}}…

DIV满屏显示IE6.BUG

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

发表评论

访客

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