麦创网

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

发表评论 评论 (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;}}
复制代码

facelist

您需要登录后才可以评论 登录 | 注册

麦创网 ( 苏ICP备13053101号-1 )

@麦创网 禁止任何未经允许的修改,传播或使用。

Powered by Discuz!

©2012 @ iMac.vip. 用户言论不代表本站立场。

返回顶部