Discuz模版全局自适应CSS代码分享
热度 1已有 973 次阅读21/3/8 09:02
|个人分类:Discuz
Discuz模版 自适应CSS代码
模版目录commom下面的common.css 添加如下代码,可完美适配自适应。
```css
/* 网站自适应 */
#postlist .res-author {display:none;}
.tl .res-ti {display:none;}
#nv[style*="fixed;"]~#mu {margin-top:33px;}
@media (max-width:960px) {#hd .wp,#wp {min-width:initial;}
#jz52top {display:none !important;}
#toptb {min-width:initial;}
#toptb .z a[target=_blank] {display:none;}
.comiis_nav {display:none;}
#g_upmine,#extcreditmenu+.pipe {display:none;}
#mn_N99ef,#mn_N12a7,#mn_home_4,#mn_N34c9 {display:none;}
.toptitle_7ree td:last-child,.toplist_7ree .fl_row td:last-child {display:none;}
.toptitle_7ree td:nth-last-child(2),.toplist_7ree .fl_row td:nth-last-child(2) {border-right:0 !important;}
.tipinfo_7ree {display:none;}
#waterfall {height:initial !important;width:100% !important;column-count:3;column-gap:10px;}
#waterfall li {width:100% !important;margin:0 0 5px 0;position:initial !important;float:none;display:inline-block;}
#waterfall .c {text-align:center;}
#waterfall .c .z {float:none;}
#waterfall .c .nopic {display:inline-block;}
#waterfall .c img,#waterfall .c .nopic {max-width:100%;}
#postlist .plc .t_f img,#postlist .plc .tattl img {max-width:100%;height:auto;}
}
@media (max-width:650px) {body,input,button,select,textarea {font-size:12px;}
body {background-image:none}
.bm {border-left:none;border-right:none;}
.wp {width:100%;}
.ct2,.ct2 .sd {margin-right:0;}
.ct2 .sd {float:none;width:100%;}
.nc-container #nc_1_wrapper,.nc-container.tb-login #nc_1_wrapper,.nc-container #nc_2_wrapper,.nc-container.tb-login #nc_2_wrapper,.nc-container #nc_3_wrapper,.nc-container.tb-login #nc_3_wrapper {width:235px !important;}
.hdc h2 a img {height:32px;}
#hd h2 {padding-right:0;}
.scbar_narrow #scbar_txt,#scbar_txt {width:calc(100vw - 135px);}
.scbar_hot_td {display:none;}
#um > p {font-size:0;}
#um > p a {font-size:12px;}
#um > p .pipe {margin:0 1.5px;font-size:12px;visibility:hidden;}
#um .avt {display:none;}
#um {padding-top:1px;padding-right:7px;}
#um #myitem,#um #myitem+.pipe {display:none;}
#um > p a[href="portal.php?mod=portalcp"],#um > p a[href="portal.php?mod=portalcp"]+.pipe,#um > p a[href="connect.php?mod=config"],#um > p a[href="connect.php?mod=config"]+.pipe {display:none;}
#um p:last-child {display:none;}
.vwmy,.vwmy.qq {background:none;padding-left:0;}
#um #loginstatus {padding-left:6px;}
.hdc {min-height:40px;}
#hd .fastlg_fm {display:none;}
#hd .fastlg {padding-top:3px;padding-right:10px;}
#hd .fastlg table tr:first-child {display:none;}
#hd .fastlg table tr:last-child td:first-child {display:none;}
#hd .fastlg table tr:last-child td:nth-child(2) {display:none;}
#pt .y {display:none;}
#pt {padding-left:5px;height:auto;}
.pg_viewthread #pt .z > a:last-child,.pg_viewthread #pt .z > em:nth-last-child(2) {display:none;}
#mn_forum_11,#mn_N05be,#mn_Na678 {display:none;}
#hd #nv > a:last-child {display:none !important;}
#nv {position:initial !important;width:initial !important;padding-left:6px;border:none !important;opacity:1 !important;}
#mu {margin-top:0 !important;}
#qmenu_menu {width:300px;height:auto;}
#fjump_menu {display:none;}
#chart .chart.z,#chart .y {display:none;}
#toplistbox_7ree .bm_h+div {overflow-y:hidden;overflow-x:auto;}
#toplistbox_7ree .toptitle_7ree td {min-width:50vw;}
.boxbg_7ree {background:none !important;padding-left:0 !important;}
.fl .fl_tb h2 > a,.fl .fl_tb dt > a {font-size:14px;}
.fl .fl_tb .fl_g dl dd:last-child {display:none;}
.fl .fl_tb tr td.fl_g {display:block !important;width:100%;}
.fl .bm_c .fl_tb tr .fl_i,.fl .bm_c .fl_tb tr .fl_by {display:none;}
.fl .fl_tb tr td.fl_g,.fl_row td {border-top:1px solid #EEEEEE;}
.fl .fl_tb tr td.fl_g:first-child {border-top:0;}
.fl .bm_h .y {display:none;}
.boardnav #ct .bm_h .xs1.xw0 {display:none;}
.f_c .list {width:350px;}
.floatwrap {height:200px;}
#thread_types.ttp {border:none;padding:0 0 0 8px;}
.ttp .num,#thread_types .fold {display:none;}
.tl .bm_c {padding-left:2px;padding-right:2px;}
.tl .tps,.tl .tps+a.xi1,.tl .res-ti+a.xi1 {display:none;}
.tl .showhide {margin-right:0;margin-top:14px;}
.tl .th tr .by,.tl .th tr .num,.tl table tr .by,.tl table tr .num {display:none;}
.tl table tr > th > img {display:none;}
.tl table tr th {width:100%;}
.tl .icn {padding-left:9px;}
.tl th {padding-left:3px;}
.tl th,.tl td {border-bottom:1px solid #E0E0E0;padding-top:8px;padding-bottom:8px;}
.tl .o {width:24px;}
#threadlist.tl tbody:last-child th,#threadlist.tl tbody:last-child td {border-bottom:none;}
.tl .res-ti {display:block;color:#999;margin-top:2px;}
.tl .res-ti > a {color:#999 !important;}
.pcht {max-width:100%;}
#waterfall {column-count:2;column-gap:6px;margin-left:5px;margin-right:5px;width:auto !important;}
#waterfall .nopic {height:80px !important;}
.tl table tr > th > img[src$="/stamp/004.small.gif"],.tl table tr > th > img[alt="digest"] {display:inline;}
#postlist {border-bottom:none;}
.pg_viewthread #newspecial,.pg_viewthread #post_reply,.pg_viewthread #newspecialtmp,.pg_viewthread #post_replytmp {display:none;}
#postlist .pls {border:none;background:transparent;}
#postlist .ad .pls {background:#E5EDF2;}
#postlist .pls {width:46px;text-align:center;}
#postlist .res-postfirst .pls {width:0;}
#postlist .favatar.pls {position:initial !important;}
#postlist .favatar.pls > * {display:none;}
#postlist .favatar.pls {padding-top:10px;}
#postlist .favatar.pls > .pi .authi {display:none;}
#postlist .favatar.pls > .bui+div {display:block;}
#postlist .favatar.pls .avatar {margin:0;}
#postlist .favatar.pls .avatar img {padding:0;margin:0 0 0 10px;background:none;width:36px;height:36px;border-radius:100%;}
#postlist .sign {display:none;}
#postlist .res-author {display:inline;font-weight:bold;}
#postlist .pti .authi .poston,#postlist .pti .authi .firstauthor {display:none;}
#postlist .pti .authi {opacity:.7;display:inline;}
#postlist .pti .authi font[color=red] {display:none;}
#postlist .pti .authi .authicn {display:none;}
#postlist .pti .authi > .pipe,#postlist .pti .authi > a,#postlist .pti .authi > .none,#postlist .pti .authi > .xg1 {display:none;}
#postlist .pi {border-bottom:none;margin-bottom:0px;}
#postlist > table:first-child .pls {display:none;}
#postlist > table:first-child .plc {padding:10px 10px !important;}
#postlist > table:first-child .plc h1.ts {font-size:15px;}
#postlist > table:first-child .plc .y {display:none;}
#postlist > table:first-child .plc .xg1 {font-size:0;}
#postlist > table:first-child .plc .xg1 img {display:none;}
#postlist > table:first-child .plc .xg1 a {font-size:12px;}
#postlist .plc {padding-left:12px;padding-right:12px;}
#postlist .plc .t_f {}
#postlist .plc .t_f img[smilieid] {zoom:.7;}
#postlist .plc .tattl {width:100%;}
#postlist .plc .t_fsz {min-height:30px;}
#postlist .plc .po {border:none;}
.pl .quote {margin-left:-58px;background-position-x:55px;margin-right:-12px;padding-left:92px;}
.pl .quote blockquote {padding-right:29px;}
#postlist #recommend_add,#postlist #recommend_subtract,#postlist .followp {display:none;}
#postlist .replysubtract {display:none;}
#postlist .bdsharebuttonbox {display:none;}
#threadstamp {transform-origin:right;transform:scale(.5);opacity:.7;}
.mobile-type {display:none;}
.psth {margin-left:0px;border-left:3px solid #F26C4F;width:180px;padding-left:15px;}
.psth .icon_ring {display:none;}
#postlist .rate .ratl tr th {width:22px;}
#postlist .rate .ratl tr th:first-child {font-size:0;width:60px;}
#postlist .rate .ratl tr th:last-child {width:80px;}
#postlist .rate .ratl tr th .xi1 {display:none;}
#postlist .rate .ratl tr td.xg1 {white-space:normal;}
.psta {width:70px;}
.psta > a > img {display:none;}
.psti {margin-left:70px;}
#modmenu {padding:0 10px;text-align:center;line-height:1.8em;margin-top:-5px;margin-bottom:-5px;}
#modmenu a {display:inline-block;color:#AAA;}
#modmenu .pipe {display:inline-block;transform:scale(.5);color:#DDD;}
.pg_viewthread #mdly {z-index:200 !important;}
#postlist .plc .po .y > label {font-size:0;margin-left:2px;margin-right:2px;}
#postlist .plc .po .y > label > input {}
#postlist+.mbm.pbm.bbs {display:none;}
#f_pst {border-bottom:none;}
#f_pst .pls {display:none;}
#f_pst .plc {padding:5px 8px 0 8px;}
#f_pst .pnpost > a {display:none;}
#f_pst #fastpostmessage {background:#FFF !important;}
#f_pst #fastsmiliesdiv {display:none;}
#f_pst .hasfsl {margin-right:0;}
.m_c .quote {width:295px !important;}
.m_c .tedt {width:310px;}
#fwin_content_comment .o span.z {font-size:12px;}
#fwin_content_comment .o span.z .xs2 {font-size:12px !important;}
.fwin .rfm,.nfl .f_c .rfm {width:365px;}
.t_f ignore_js_op > span[id^="attach_"] {font-size:14px;white-space:normal !important;}
#pgt,.pgs {padding-left:8px;padding-right:8px;}
.pg > a {display:none;}
.pg > strong+a,.pg > a:nth-last-child(3) {display:inline;}
.pg > .first,.pg > .prev,.pg > .prev+a,.pg > .last {display:inline;}
.pgbtn a,#autopbn {border-radius:0 !important;border-left:none !important;border-right:none !important;}
#category_lk .lk_logo p {display:none;}
#online.oll {display:none;}
#ft {padding-top:12px;padding-bottom:12px;}
#ft:after {content:"";}
#flk {float:none;text-align:center;}
#frt,#flk .xs0 {display:none;}
#flk strong:after {content:" ";display:block;}
#ft {background:#F3F3F3;border-top:1px solid #E3E3E3 !important;color:#999;}
.res-footer-note {padding:0 10px;}
#ct.ct2_a {min-height:auto;}
.ct2_a .mn {display:inline-block;box-sizing:border-box;width:100%;margin-left:8px;margin-right:8px;float:none;}
.tfm .pt,.tfm .px {width:150px;}
.tedt .pt {width:100%}
#td_timeoffset select {width:150px;}
.ct2_a {display:flex;flex-wrap:wrap-reverse;padding-left:0 !important;background:none;border:none;}
.ct2_a.cl:after {content:none;}
.ct2_a .appl {display:inline-block;box-sizing:border-box;width:100%;margin:3px 0 5px 0;background:#F6F6F6;border:none;margin-left:auto !important;}
.appl {float:none;}
.appl .tbn .bbda {background:#F0F0F0;margin-bottom:3px;text-align:center;font-weight:normal;border-bottom:none;}
.ct2_a .appl .tbn li {border:none !important;float:left;}
.ct2_a .appl .tbn li a {color:#777;}
.ct2_a .appl .tbn li.a {font-weight:bold;margin-top:0;background:none;}
.ct2_a .appl .tbn li.a a {color:#444;}
.tbn ul a {display:inline-block;}
.pm_op_r {padding-right:10px;}
.tb a {padding-left:7px;padding-right:7px;}
.pg_spacecp .bm2 .bm2_b,.pg_spacecp .bm2 .bm2_b_y {float:none;width:auto;}
.pg_spacecp .bm2 .bm2_b_y {margin-top:15px;}
.pg_task .ptm tr > .hm,.pg_task .ptm tr > .bbda[width="80"] {display:none}
.pg_task .ptm tr > .bbda[width="120"] {width:100px;text-align:center;}
#uhd .flw_hd {width:auto;margin-bottom:0;}
#uhd .flw_hd .o {margin-top:0 !important;}
#uhd .mn {line-height:22px;}
#uhd .tns th,#uhd .tns td {padding-left:7px;padding-right:7px;}
.pm {width:345px;}
.pmb {width:315px;padding:15px 15px 0;height:180px;}
.pmform .px {width:190px !important;}
.pmform .tedt {width:auto !important;}
.pmform th {width:50px;}
.pg_modcp .ct2_a .mn {margin-left:5px;margin-right:5px;}
.pg_modcp .ct2_a .tbn > ul > li > .mtn {margin-left:3px;margin-top:3px !important;}
.pg_modcp .exfm table tr {display:flex;flex-flow:row wrap;}
.pg_modcp .exfm table tr th {flex-basis:25%;}
.pg_modcp .exfm table tr td {flex-basis:70%;}
.pg_modcp .tl table tr td:not([class]) {width:100%;}
.pg_modcp .tl table tr td.o {width:30px;padding-left:10px}
#reportform {overflow-x:scroll;}
#list_modcp_logs .td,#list_modcp_logs .th {padding:7px 10px;}
.rfm {width:auto;}
.rfm th {width:6em;}
.nfl .f_c {width:95%;box-sizing:border-box;}
.fwinmask {margin-top:-20px;}
.reason_slct .reasonselect {height:5.8em !important;}
font[size] {font-size:23px;}
font[size="1"] {font-size:12px;}
font[size="2"] {font-size:14px;}
font[size="3"] {font-size:16px;}
font[size="4"] {font-size:18px;}
font[size="5"] {font-size:20px;}
font[size="6"] {font-size:21px;}
font[size="7"] {font-size:23px;}
}
/* 发帖输入框自适应 */
@media (max-width:650px) {#e_fls,#e_aud,#e_vid,#e_fullswitcher,#e_svdsecond,#e_chck,#e_tpr,#fastpostimg.fmg,#e_attach,#e_backcolor,#e_autotypeset,#e_justifyright,#e_italic,#e_underline,#e_cst1_qq,#e_image,#e_quote,#e_code,#e_adv_s3 {display:none}
}
/* 门户频道及文章自适应 */
@media (max-width:650px) {.ct2 .mn {width:100%;}
```
2.还是在common目录下widthauto.css 代码如下
```css
.wp { width: 98%; }
#hd .wp, #wp { min-width: 960px; }
@media (max-width:960px) {.wp {min-width: 100% !important;}}
/* ----------------------------------
@media (max-width:960px) {.wp {min-width: initial !important;}}
---------------------------------- */
.ct2 { margin-right: 235px; }
.ct2 .sd { margin-right: -235px; }
.ie7 .ct2 .sd { margin-left: 15px; }
.ie6 .ct2 .sd { padding-left: 15px; position: relative; }
.ct2 .mn { width: 100%; }
.ct2 #chart, .ct2 #an { margin-right: -235px; }
.ie6 .ct2 #chart, .ie6 .ct2 #an { position: relative; }
.ct2_a { padding-left: 150px; }
.ct2_a .appl { margin-left: -150px; }
.ie6 .ct2_a .appl { position: relative; display: inline; }
.ct2_a .mn { width: 99%; }
#nv_userapp .ct2_a .mn, .ct2_a_r .mn { width: 99%; }
.ct3_a { padding: 0 240px 0 160px; }
.ct3_a .appl { margin-left: -160px; }
.ie6 .ct3_a .appl, .ie6 .ct3_a .sd { display: inline; }
.ct3_a .sd { margin-right: -240px; }
.ct3_a .mn { margin: 0; width: 100%; }
#nv, #mu { border-left: 1px solid {COMMONBORDER}; border-right: 1px solid {COMMONBORDER}; }
#nv { background-repeat: repeat-x; background-position: 0 -33px; }
#mu ul { border-bottom: 1px solid {COMMONBORDER}; background-image: none; background-color: {COMMONBG}; }
.pg_post .ct2_a { margin-left: 0; padding-left: 0; }
.pg_post .ct2_a .appl { margin-left: 0; background: none; }
.pg_modcp .ct2_a, .pg_announcement .ct2_a { border: none; }
.pg_modcp .ct2_a .mn, .pg_announcement .ct2_a .mn { margin-right: 0; padding-top: 0; }
.tdats .tdat { width: 20%; }
.tdats .tfxf { width: 79.5%; }
.tdats .tfx, .tdats .tb, .tscr { width: 39.5%; }
.tscr .tdat, .tscr .tdat th, .tscr .tdat td { width: 100%; }
.widthauto #toptb #diy-tg_menu { margin: -7px 0 0 -1px; }
.widthauto .switchwidth { background-position: 100% -18px; }
.widthauto .switchwidth:hover { background: url({IMGDIR}/switch_width.png) no-repeat 100% -54px; }
```
没记错的话只修改了header.htm、common.css、widthauto.css 这个三个文件