当前位置:首页 > Div + CSS

网页自适应宽度

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

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

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

div+css布局漫谈

1.CSS布局常用的方法:float : none | left | right 取值:none : 默认值。对象不飘浮 left : 文本流向对象的右边 right : 文本流向对象的左边 它是怎样工作的,看个一行两列的例子 xhtml: <div > <div…

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

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>www.aspxuexi.com asp学习网</title&…

CSS hack浏览器兼容一览表

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

On having layout

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

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

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

对ie6、ie7、ff兼容性的详细css hack介绍

这个毛病把我憋了好久了,最近到底找到了解决滴方式,通过偶测试系完整ok滴,和大伙儿共享。以下为引佣:如今偶大多数全是用!important来hack,关于ie6和firefox测试可以正常卖弄,可是ie7对!important可以准确说明,会导致页面没...…

发表评论

访客

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