第 1 位会员
日志
粉丝
关注
好友:5922
访客:33479
日志归档
    相册
    目录

    Discuz模版全局自适应CSS代码分享

    Discuz / 21/3/8 09:02 / 1000 / 2 / 1

    Discuz模版 自适应CSS代码

    模版目录commom下面的common.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 代码如下

    .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 这个三个文件

    2
    评论 (2)
    MemacX
    21/3/8 22:09
    @media (max-width:650px){#scbar_txt,.scbar_narrow #scbar_txt{width:calc(98vw - 135px)}.scbar_hot_td{display:none}}
    @media(max-width:960px){#postlist .plc .t_f img,#postlist .plc .tattl img{max-width:100%;height:auto;}}
    @media (max-width:650px){input{font-size:12px;}.fwin .rfm,.nfl .f_c .rfm{width:auto;margin:0 auto;}.rfm{width:auto;}.rfm th{width:6em;} .nfl .f_c{width:auto;}}
    @media (max-width:650px){#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:transparent;border-top:1px solid #E3E3E3 !important;color:#999;}}
    #scbar_txt{transition:all 0.25s ease;-webkit-transition:all 0.25s ease;-moz-transition:all 0.25s ease;-o-transition:all 0.25s ease}#scbar_txt:hover,#scbar_txt:focus{width:450px}
    @media (max-width:650px){#fastpostsml_menu, #e_sml_menu{left:50%!important;margin-left:-152px;}}
    @media (max-width:650px){.fwinmask{padding:15px;width:98% !important;margin:0 auto;}}
    MemacX
    21/3/8 22:10
    一、搜索页搜索框自适应:
    1、模板common.css最底部添加
    @media (max-width:650px){#scbar_txt,.scbar_narrow #scbar_txt{width:calc(98vw - 135px)}.scbar_hot_td{display:none}}        
    复制代码
    2、在模板module.css找到下面一行代码
    #scform_srchtxt { padding: 0 10px; width: 460px; background: transparent; outline: none; }
    复制代码
    替换成
    #scform_srchtxt { padding: 0 10px; width: 100%; background: transparent; outline: none; }
    复制代码
    二、判断相关内容如果是在论坛页才显示:
    <!--{if $_G['basescript'] == 'forum' || $_G['basescript'] == 'misc'}-->相关内容<!--{/if}-->
    复制代码
    三、图片自适应:
    1、本站所提供模板的module.css第1317行左右(如果不是本站提供的模板可以忽略此步):
    .zoom { cursor: pointer; width: 50%;display: block;margin: auto;}
    复制代码
    改为:
    .zoom { cursor: pointer; }
    复制代码
    2、模板common.css最底部添加:
    @media(max-width:960px){#postlist .plc .t_f img,#postlist .plc .tattl img{max-width:100%;height:auto;}}
    复制代码
    四、登录弹窗自适应:
    1、模板common.css最底部添加:
    @media (max-width:650px){input{font-size:12px;}.fwin .rfm,.nfl .f_c .rfm{width:auto;margin:0 auto;}.rfm{width:auto;}.rfm th{width:6em;} .nfl .f_c{width:auto;}}
    复制代码
    五、瀑布流自适应:
    1、模板common.css最底部添加:
    @media (max-width:650px){#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%;}#waterfall {column-count: 2;column-gap: 6px;width: auto !important;}#waterfall .nopic {height: 80px !important;}}
    复制代码
    六、底部自适应:
    1、模板common.css最底部添加:
    @media (max-width:650px){#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:transparent;border-top:1px solid #E3E3E3 !important;color:#999;}}
    复制代码
    七、搜素框滑动:
    1、模板common.css最底部添加:
    /* 搜素框滑动 */
    #scbar_txt{transition:all 0.25s ease;-webkit-transition:all 0.25s ease;-moz-transition:all 0.25s ease;-o-transition:all 0.25s ease}#scbar_txt:hover,#scbar_txt:focus{width:450px}
    复制代码
    八、发帖框表情自适应:
    1、模板common.css最底部添加:
    @media (max-width:650px){#fastpostsml_menu, #e_sml_menu{left:50%!important;margin-left:-152px;}}
    复制代码
    九、发帖框图片和附件上传弹出框自适应:
    1、模板common.css最底部添加:
    @media (max-width:650px){.fwinmask{padding:15px;width:98% !important;margin:0 auto;}}
    复制代码
    请勿发布不友善或者负能量的內容。与人为善,比聪明更重要!
    您需要登录后才可以评论 登录 | 注册