วิธีทำให้เว็บเราเป็น Responsive

pphum

ไปที่ template\ชื่อธีม\common\common.css

แล้ววางโค้ด ทั้งหมดนี่ต่อท้ายครับ บันทึก แล้วอัพเดตแคส

1. body#space .mn { float: left!important; width: 760px!important; display: inline;margin-left:10px;margin-bottom: 1em;}
   
2. body#space .sd { float: right;margin-right:10px; width: 180px; overflow: hidden; _overflow-y: visible; }
   
3. body#space .wp { margin: 0 auto; width: 970px; min-width:970px; }
   
4. body#space #wp { width: 960px; min-width:960px; }
   
5. body#space #hd {width: 948px;min-width: 948px;margin-top: 30px; border-bottom: {HEADERBORDER} solid {SPECIALBORDER}!important; {HEADERBGCODE} }
   
6. body#space #hd .wp { padding: 10px 0 0; }
   
7. body#space .bm{background: #FFF;zoom: 1;border: 1px solid #CDCDCD;}
   
8. body#space .bm_h{padding: 0 10px;height: 31px;border-top: 1px solid #FFF;border-bottom: 1px solid #C2D5E3;background: #F2F2F2;line-height: 31px;white-space: nowrap;overflow: hidden;}
   
9. body#space #pcd {padding: 15px 0 15px 0;}
   
10. body#space .area {padding: 0 5px;}
    
11. 
    
12. 
    
13. .wp { width: 100%; }
    
14.         #hd .wp, #wp { min-width: 1094px; }
    
15. 
    
16. .ct2 { margin-right: 320px; }
    
17.         .ct2 .sd { margin-right: -320px; }
    
18.                 .ie7 .ct2 .sd { margin-left: 20px; }
    
19.                 .ie6 .ct2 .sd { padding-left: 20px; position: relative; }
    
20.         .ct2 .mn { width: 100%; }
    
21. 
    
22. .ct2 #chart, .ct2 #an { margin-right: -320px; }
    
23.         .ie6 .ct2 #chart, .ie6 .ct2 #an { position: relative; }
    
24. 
    
25. .ct2_a { padding-left: 150px; }
    
26.         .ct2_a .appl { margin-left: -150px; }
    
27.                 .ie6 .ct2_a .appl { position: relative; display: inline; }
    
28.         .ct2_a .mn { width: 98%; }
    
29.         #nv_userapp .ct2_a .mn, .ct2_a_r .mn { width: 99%; }
    
30. 
    
31. .ct3_a { padding: 0 320px 0 160px; }
    
32.         .ct3_a .appl { margin-left: -160px; }
    
33.                 .ie6 .ct3_a .appl, .ie6 .ct3_a .sd { display: inline; }
    
34.         .ct3_a .sd { margin-right: -320px; }
    
35.         .ct3_a .mn { margin: 0; width: 100%; }
    
36. 
    
37. #nv, #mu { border-left: 1px solid {COMMONBORDER}; border-right: 1px solid {COMMONBORDER}; }
    
38. 
    
39. #nv { background-repeat: repeat-x; background-position: 0 -33px; }
    
40. 
    
41. #mu ul { border-bottom: 1px solid {COMMONBORDER}; background-image: none; background-color: {COMMONBG}; }
    
42. 
    
43. .pg_post .ct2_a { margin-left: 0; padding-left: 0; }
    
44.         .pg_post .ct2_a .appl { margin-left: 0; background: none; }
    
45. .pg_modcp .ct2_a, .pg_announcement .ct2_a { border: none; }
    
46.         .pg_modcp .ct2_a .mn, .pg_announcement .ct2_a .mn { margin-right: 0; padding-top: 0; }
    
47. 
    
48. .tdats .tdat { width: 20%; }
    
49. .tdats .tfxf { width: 79.5%; }
    
50. .tdats .tfx, .tdats .tb, .tscr { width: 39.5%; }
    
51.         .tscr .tdat, .tscr .tdat th, .tscr .tdat td { width: 99%; }
    
52. 
    
53. .widthauto #toptb #diy-tg_menu { margin: -7px 0 0 -1px; }
    
54. .widthauto .switchwidth { background-position: 100% -18px; }
    
55. .widthauto .switchwidth:hover { background: url({IMGDIR}/switch_width.png) no-repeat 100% -54px; }
    
56. 
    
57. 
    
58. @media screen and (max-width:1430px) {
    
59.         body { background:#e2e5e9 url({IMGDIR}/a1.gif) fixed;}
    
60.         * html body { background-color:#e2e5e9; background-image:none;}
    
61.         #page_main {margin:0 auto; width:1200px;}
    
62.         #page_main .insite_bg{ min-height:1080px; float:left;width:1200px; padding:0 0 30px 0; background:#fff url({IMGDIR}/bg1.gif) repeat-y 0 0;}
    
63.         .effects_box { margin: 0 auto; height:580px; overflow: hidden;}
    
64.         .right_hot li{float:left;width:370px!important;}
    
65.         .right_hot li a{width:285px!important;}
    
66.         .right_hot li em{padding:0 0 0 0!important;}
    
67.        
    
68.         .box_in3 {height:388px; overflow:hidden;}
    
69.         .art_listbox_3, .art_listbox_4{width:50%;}
    
70.         * html .art_listbox_3, * html .art_listbox_4{width:50%;}
    
71.         *+html .art_listbox_3, *+html .art_listbox_4{width:50%;}
    
72.         }
    
73. @media screen and (max-width:1590px) {
    
74.         .right_hot li{float:left;width:50%;}
    
75.         }
    
76. 
    
77. @media screen and (max-width:1890px) { .effects_box_in { margin:0 auto; width:1537px;} * html .effects_box_in { margin:0 auto; width:auto;}}
    
78. @media screen and (max-width:1640px) { .effects_box_in { margin:0 auto; width:1281px;} * html .effects_box_in { margin:0 auto; width:auto;}}
    
79. @media screen and (max-width:1435px) { .effects_box_in { margin:0 auto; width:1025px;} * html .effects_box_in { margin:0 auto; width:auto;}}
    
80. @media screen and (max-width:768px) {
    
81. html, body{ background-image:none; background-color:transparent; margin:0; padding:0; height:100%; font-size:15px; font-family:Microsoft YaHei, Helvetica, sans-serif; -webkit-text-size-adjust: none;}
    
82. h1, h2, h3, h4, h5, h6, p, th, td { font-size: 15px; -webkit-text-size-adjust: none;}
    
83. input,select,textarea,button { font-size: 15px; -webkit-text-size-adjust: none; font-family:Microsoft YaHei, Helvetica, sans-serif; }
    
84. #scrolltop { visibility: hidden; position: fixed; bottom: 5px; display: block; margin: -30px 0 0 -15px!important; width: 40px; background: #faefe6; border: 1px #e6b38f solid; border-radius: 3px; border-top: 0; cursor: pointer; }
    
85. #scrolltop a { background: url({IMGDIR}/scrolltop.png) no-repeat 0 0; border-top: 1px #e6b38f solid!important; }
    
86. #pt { display:none;}
    
87. .pcht { width: auto !important; }
    
88. .pdbts_0 a {width: 40px !important;}
    
89. .tl th .someinfobox *{ font-size:12px; color: #96a0b4 !important;}
    
90. .tl th .someinfobox em{padding:0 5px 0 0 !important;}
    
91. .tl .frm {width: 1px !important; text-indent:-5000px; overflow:hidden;}
    
92. .tb .a a, .tb .current a { white-space: nowrap;}
    
93. .nfl .f_c { margin: 30px auto!important; padding: 10px!important; width: 90%!important; border: 3px solid {COMMONBG}; background: {WRAPBG}; }
    
94. .fwin .rfm, .nfl .f_c .rfm {width: auto;}
    
95. .rfm .px {width: 100px!important;}
    
96. .rfm th {padding-right: 10px;width: 70px!important;white-space: nowrap;text-align: right;}
    
97. .xst { font-size: 15px!important; }
    
98. 
    
99. #uhd {padding-top: 0;border: 0;background:transparent; margin:0 auto;}
    
100. #uhd .h {padding-left: 0; margin:0 auto;}
     
101. #uhd .h p{padding-left: 0; margin:0 auto; width:auto; text-align:center;}
     
102. #uhd .avt {display: block;float: none;margin: 0 auto;width:210px;text-align:center;}
     
103. #uhd .mt {padding: 10px 0;font-size: 16px;width:210px;text-align:center;margin: 0 auto;display: block;}
     
104. #uhd .avt img {padding: 2px;width: 120px;height: 120px;background: #FFF;border: 4px solid;border-color: #f3f4f7;border-radius: 66px;}
     
105. #uhd .mn { display:none;}
     
106. #uhd .flw_hd {float: none;width: 260px;margin:0 auto;margin-bottom: 0;}
     
107. #uhd .flw_hd th, #uhd .flw_hd td{text-align:center!important; padding:0 15px;}
     
108. #fastpostform {width: 100%!important;}
     
109. .flw_article img{ max-width:100%!important;}
     
110. 
     
111. /* 发特殊主题帖 by dfox */
     
112. .sinf {width: auto !important;}
     
113. .sinf p, .sadd p {padding: 2px 0;height: 30px;line-height: 30px;}
     
114. .sinf .px {width: 50% !important;}
     
115. .sinf .pxs {width: 20px !important;}
     
116. .sadd .px {width: 50px !important;}
     
117. .sinf {float: left;padding-right: 0px !important;width: 380px;border-right: 0 !important;}
     
118. .sinf h4 {padding: 6px 0;}
     
119. .sinf textarea {width: auto !important;height: 80px;}
     
120. .sinf a.d {margin-top: 8px;}
     
121. .sinf object {vertical-align: middle;display:none;}
     
122. .onum {float: left;margin-right: 6px;width: 16px;}
     
123. .oinf {width: 270px !important;}
     
124. .sinf dl, .sadd dl {overflow: hidden;}
     
125. .sinf dl dt, .sadd dl dt {float: left;padding-top: 3px\9;width: 75px;clear: left;}
     
126. .sinf dl dd, .sadd dl dd {margin-bottom: 10px;overflow: hidden;}
     
127. .sinf dl dd {width:  auto !important;}
     
128. .sinf span.fb, .sadd span.fb {display: block;float: left;margin-right: 6px;height: 26px;line-height: 26px;white-space: nowrap;}
     
129. .sinf dl dd strong {padding: 0 8px;}
     
130. .sadd {float: left;margin-left: 10px;width: auto !important;overflow: hidden;}
     
131. .sadd dl dd {width: 420px;}
     
132. .ct2_a .sadd {width: 360px;}
     
133. .ct2_a .sadd dl dd {width: 260px;}
     
134. .spl em {float: left;margin-right: 9px;height: 20px;line-height: 20px;}
     
135. .spl input[type=radio] {margin: 0 3px 0 0;}
     
136. .spimg {margin: 0 10px 0 0;width: 200px;border: 1px solid #AAA;}
     
137. .spmp {width: 30px;}
     
138. .spmf {width:  auto !important;}
     
139. .spmf, .spmf3 {overflow: hidden;_height: 1%;}
     
140. .spmf label, .spmf3 label {display: block;padding-top: 5px;}
     
141. .spmf em {float: left;width: 150px;}
     
142. .spmf3 em {float: left;margin-right: 12px;}
     
143. .spmf3 .px {margin: 0 !important;width: 72px;}
     
144. 
     
145. /** end **/
     
146. 
     
147. /*活动、商品*/
     
148. .act {}
     
149. .act .c { line-height: 28px; font-size: 14px; }
     
150. .spvimg { text-align:left; margin:0 auto; padding:0 0 20px 0!important; width:auto!important;background:none !important; border:0 !important;}
     
151. .spvimg  img{ max-width:90%!important;width:auto!important; height:auto!important;}
     
152. .spvimg em.hot { width: 120px; height: 102px; background-position: 0 -104px; }
     
153. .spi { margin-left: 0 !important; clear:both; width:100%; margin:0 auto; float:left;}
     
154. .trdc { margin-top: 20px; background: #8e92a0!important;border-radius: 4px; height: 30px; line-height: 30px; color: {LIGHTLINK}; }
     
155. /** end **/
     
156. 
     
157. .sslct_btn {font-size: 12px;}
     
158. .left_menubox{ width:8px;float:left;margin:0;padding:0;position:relative;}
     
159. .left_menubox .in{display:none;}
     
160. .left_menubox .online_user{ display:block; text-indent:1.2em; background:url({IMGDIR}/a8.png) no-repeat 0 50%;}
     
161. .page_contentbox {margin:0 0 0 18px;padding:0 10px 0 0;min-width: inherit;}
     
162. #page_main {margin:0 auto; width:auto;}
     
163. #page_main .insite_bg{ min-height:1080px; width:100%;margin:0 auto; padding:0 0 30px 0; background:#fff url({IMGDIR}/bg1.gif) repeat-y -64px 0;}
     
164. #hd .wp, #wp { min-width:inherit; }
     
165. #toptb {min-width: inherit;width: auto;}
     
166. #qmenu{display:none;}
     
167. #nv1 i, #nv2 i, .top_bgimg {display:none;}
     
168. #nv1, #nv2 { height:38px; background:none; clear:both; overflow:hidden; margin-bottom:20px;}
     
169. 
     
170. .mobile_on { display: block;}
     
171. .mobile_hidden{display:none!important;}
     
172. 
     
173. .box_in3 {height: auto; overflow:hidden; padding:20px 0 0 0;}
     
174. .art_listbox_3, .art_listbox_4{width:100%; clear:both;border-radius: 6px;}
     
175. 
     
176. .effects_box { clear:both; margin: 0 auto; height: auto; overflow: hidden; }
     
177. .effects_box_in { margin:0 auto; width:442px;}
     
178. .effects_box .img_box {float: left; margin:0 auto; display:inline;width:200px;padding:10px; overflow:hidden;}
     
179. .effects_box .box_in{display:block;width:200px;height:265px;border:#e3e8ee 1px solid;overflow:hidden;box-shadow: 2px 2px 2px #e3e8ee;border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;}
     
180. 
     
181. .cbp-spmenu {position: absolute;top:0;left:0;display:block;float:left;width: 150px;background: #fe6400;min-height:960px;}
     
182. .cbp-spmenu h3 {color: #ffc49b;font-size: 24px;padding:0 0 0 20px;height:78px;line-height:78px;margin: 0;font-weight: 700;background: #b63300;}
     
183. .cbp-spmenu a {display: block;color: #fff;font-size: 16px;font-weight: 400;}
     
184. .cbp-spmenu a:hover {background: #fe6400;}
     
185. .cbp-spmenu-vertical {width: 150px; display:block;height: 100%;top: 0;z-index: 1000;}
     
186. .cbp-spmenu-vertical a {border-bottom: 1px solid #ee4b00;background: #fe6400;padding:12px 8px 12px 1em;display: block;height:25px;white-space: nowrap; overflow: hidden;text-overflow: ellipsis;line-height:25px;}
     
187. .cbp-spmenu-left {left: -150px;position:relative;}
     
188. .cbp-spmenu-left.cbp-spmenu-open {left: 0px;}
     
189. .cbp-spmenu-right.cbp-spmenu-open {right: 0px;}
     
190. .cbp-spmenu-push-toright {left: 150px;}
     
191. .cbp-spmenu, .cbp-spmenu-push {-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;}
     
192. .main {top:78px;left:150px;z-index: 1001;}
     
193. .main > section {max-width: 25px;margin:0;}
     
194. .main > section button {border: none;background: #fe6400 url({IMGDIR}/a2.png) no-repeat 4px 50%;padding: 0;display: block;width: 25px;height:50px;cursor: pointer;margin: 0;border-radius: 0 25px 25px 0;position:fixed;top:82px;left:0;}
     
195. .main > section button.active {border: none;background: transparent url({IMGDIR}/a3.png) no-repeat 100% 50%;padding: 0;display: block;width: 135px;height:50px;cursor: pointer;margin: 0;border-radius: 0 0 0 0;position: absolute;top:16px;left:0;}
     
196. .main > section button a {border: none;background-color:transparent;width: 25px;height:50px;display:block;float:left;}
     
197. .main > section button a:hover {border: none;background:none;}
     
198. .responsive-menu, .responsive-menu select {display: block;clear:both;}
     
199. .responsive-menu {text-align: center;}
     
200. .responsive-menu select {float: left;display: block;width: 100%;margin: 0;-webkit-appearance: button;-webkit-padding-end: 30px;-webkit-padding-start: 40px;-webkit-user-select: none;border: 1px solid #e3e8ee;border-top: 3px solid #e3e8ee;color: #4b4d54;font-size: 15px;overflow: hidden;padding:5px 20px 5px 20px;cursor: pointer;outline: none;background:#f4f5f7 url({IMGDIR}/a20.gif) no-repeat 100% 50%;border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;}
     
201. .responsive-menu select option{line-height:30px;height:30px;margin:5px auto;}
     
202. .responsive-menu #mainnav {display:none;}
     
203. .top_imgbottums {float:right;text-align:right;padding:5px 0 0 0;}
     
204. .top_imgbottums img{height:34px;width:34px;margin:0;}
     
205. .topuserbox h4 img{float:left; width:125px;}
     
206. #myprompt_menu { position:fixed; left:-5000px;}
     
207. .top_usermessages_a { font-size:12px; font-weight:700;-webkit-text-size-adjust: none; color:#fe6400; display: block; line-height:28px; height:28px;}
     
208. .top_usermessages_a img{vertical-align:middle;}
     
209. 
     
210. .in_list{clear:both; display:block; margin:0 auto;text-align:left; float:left; padding-bottom:6px;}
     
211. .in_list a{ float:left; display:block; height:24px; line-height:24px;font-size:14px;font-weight:700;color:#fe6400;padding:0 10px; background:#eceff1;border-radius:12px; margin:0 4px 4px 0;white-space: nowrap;}
     
212. .in_list a:hover{text-decoration:none;color:#fff; background:#a3a6ae;}
     
213. 
     
214. .left_hot{ float:left; width:auto; clear:both; margin:0 auto;}
     
215. .right_hot{ margin:0; clear:both; float:left; padding-bottom:10px;}
     
216. .right_hot_in{ margin:0; float:left; display:block;height: auto; overflow:;padding:0;}
     
217. .right_hot li{width:100%!important; height:24px; overflow:hidden; float: left;}
     
218. .right_hot li a{width:auto!important;}
     
219. 
     
220. .nTab {margin: 0 0 0 0; float:left;overflow:;width:auto;}
     
221. .nTab .TabTitle { display:none;}
     
222. .nTab .TabContent {width:auto;float:left; margin:0 auto;padding:0;height:auto;}
     
223. .nTab .TabContent .text {float:left;width:auto;}
     
224. .nTab .TabContent .text h1 {float:left;width:auto; overflow:hidden;}
     
225. .nTab .TabContent .text h1 a {float:left;display:block;font-size:16px;width:auto;height: auto;line-height:24px; padding:10px 0; overflow:inherit;overflow:;color:#060606;}
     
226. .nTab .TabContent .text .newsbox1 {clear:both;width:auto;float:left;}
     
227. .nTab .TabContent .text .newsbox1 p {color:#808ba1;line-height:24px;height:auto; float:none; width:auto; padding:0 0 10px 0; border-bottom:#e3e8ee 1px solid;  margin-bottom:10px;}
     
228. .nTab .TabContent .text .newsbox1 p a { clear:both; display:block; float:none; margin:0 auto; text-align:center; overflow:hidden;}
     
229. .nTab .TabContent .text .newsbox1 p a img{ clear:both; display:block; float:none;margin:8px 0 15px 0;min-width:290px;height: auto;border-radius: 4px;}
     
230. 
     
231. .box_in1{margin:0 auto; clear:both;width:auto;overflow:hidden;}
     
232. .box_in1 .in{width: inherit;padding:0;margin:0 auto;float: none;}
     
233. .box_in1 .box{width:auto; clear:both;padding:0 0 0 0;margin:0 auto; display:block; float:none;text-align:center;}
     
234. .box_in1 .box1{width:auto; clear:both;padding:0 0 0 0;margin:0 auto; display:block; float:none;text-align:center;}
     
235. 
     
236. .ct2 {margin-right: 0;}
     
237. .ct2 .sd {display:none;}
     
238. .ct2 .mn {width: 100%;}
     
239. .art_listbox_1, .art_listbox_2 {width:100%;}
     
240. .ct3_a {padding: 0 0 0 0;}
     
241. .ct3_a .appl {margin-left: 0;}
     
242. .ct3_a .sd {display:none;}
     
243. .ct3_a .mn {margin: 0;width: 100%;}
     
244. 
     
245. .article_title {clear:both;margin:0 auto;border-bottom:#e3e8ee 4px solid;border-top:#e3e8ee 1px solid;height: auto;line-height:26px; padding:10px 0;color:#fe6400;font-family: Microsoft YaHei, Segoe UI, Tahoma, Arial;font-size:24px;}
     
246. .article_title_style_in{text-align:center;}
     
247. #article_content { border-top:0; border-top:#f3f5f8 0px solid;}
     
248. .vw .d img {width: 100%;}
     
249. .yuan_img img{padding: 2px;width: 120px;height: 120px;background: #FFF;border: 4px solid;border-color: #f3f4f7;border-radius: 66px;}
     
250. .tedt { width: 99%; border: 1px solid; border-color: #cfd4db;border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; }
     
251. .tedt textarea, .tedt .area{ background: transparent;}
     
252. .ptn .pn {vertical-align: middle;overflow: hidden;margin: 0 auto;padding:0;height: 40px;line-height:40px;width:99%;color:#a50000;font-size:18px;border:#ffb27e 1px solid;background: #fec7a2 url({IMGDIR}/a23.gif) repeat-x 0 0;cursor: pointer;border-radius: 4px;-webkit-border-radius: 4px;-moz-border-radius: 4px;}
     
253. .ptn .pn strong{ font-weight:400;}
     
254. .ptn .pn:hover, .ptn .pn:active{background: #fec7a2 url({IMGDIR}/a23.gif) repeat-x 0 -50px;}
     
255. 
     
256. td.num, td.by, td.o { width: 1px!important; overflow:hidden!important; text-indent:-9000px!important;}
     
257. td.num cite, td.by cite, td.num em, td.by em, { display:none!important;}
     
258. .tl th, .tl td.fn {padding-right: 0!important;zoom: 1;}
     
259. .rightbox { display:none;}
     
260. .v_leftbox {margin:0 0 0 0; padding:0 0 0 0;}
     
261. .pct img{ max-width:100%;}
     
262. #vfastpost #vf_m input{ border:0!important; padding-left:0!important; padding-right:0!important; background:none!important; width:90%!important;}
     
263. #p_btn { display:none;}
     
264. .attach_nopermission {width: auto!important;}
     
265. .psth {width: 200px!important; }
     
266. #newspecial_menu a { display: block; padding: 3px 0 3px 30px; font-size:14px;white-space: nowrap; }
     
267. .ct_vw_mn { float: left; width: 100%!important; }
     
268. 
     
269. .mlp li {width: 135px!important;}
     
270. .ml li {float: left;padding: 5px 0!important;text-align: center;overflow: hidden;width: 125px!important;}
     
271. 
     
272. .photo_pic { width:100%!important; }
     
273. .photo_pic img{ width:auto; max-width:auto!important; }
     
274. 
     
275. #moodfm{ width: 100%!important; }
     
276. #moodfm table{ width: 100%!important; }
     
277. #moodfm textarea { width: 100%!important; height: 48px; padding:4px; border: 1px solid; border-color:#cfd4db; overflow-y: auto;border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; }
     
278. .mi .moodfm_input { width: auto!important; height: 58px; background: {COMMONBORDER} url({IMGDIR}/mood_input.png) no-repeat 100% 0; }
     
279. .moodfm_btn { width:68px; background: url({IMGDIR}/mood_input_btn.png) no-repeat 100% 0!important;}
     
280. .cmt {margin: 10px 0 10px 0!important;}
     
281. 
     
282. .ct2_a {padding-left: 0;}
     
283. .ct2_a, .ct3_a {border: 0;background: none;}
     
284. .ct2_a .appl {display:block;clear:both;margin:0 auto;width:100%;}
     
285. .appl {overflow: visible;padding: 6px 0 1px 0;margin:0 auto;float:left;border-bottom:#e3e8ee 1px solid;}
     
286. .ct2_a .mn {display: block;margin:0 auto;padding-top: 0;width: 100%;float: none;}
     
287. .my_flw_stats {display:none;}
     
288. .tbn {margin: 0;}
     
289. .tbn .mt {padding: 5px 0;}
     
290. .bbda {border-bottom:#e3e8ee 4px solid;margin-bottom:10px;}
     
291. .tbn li {margin: 0 5px 5px 0;height: 22px;line-height:22px;border-bottom: 0;float:left;display:block;}
     
292. .appl li {display: block;height: 28px;line-height: 28px;white-space: nowrap;word-wrap: normal;font-size: 14px;text-overflow: ellipsis;overflow: hidden;}
     
293. .tbn li.a {margin: 0 5px 5px 0;padding: 0;border-top:0;border-bottom-style: none;background:transparent;}
     
294. .tbn li.a a {display: block;float:left;height: 22px;line-height:22px;background:#8c8e98;padding:0 10px;color:#fff;}
     
295. .tbn ul a {display: block;float:left;height: 22px;line-height:22px;background:#f0f1f5;padding:0 10px;border-radius: 4px;}
     
296. #flw_header {padding:10px 0!important;}
     
297. .pg_space .bm_c {padding: 10px 0!important;}
     
298. .ct1 {border: 0;border-top: none;}
     
299. .tl table th {width: 100%;}
     
300. .ttp li {float: left;display:block;margin: 0 5px 5px 0;padding: 0!important;border: 0!important;font-size:14px!important;}
     
301. .ttp li a {border-radius: 4px;float: left;display:block;margin:0;padding: 0 10px!important;height: 22px!important;line-height:22px!important;border: 0!important;background: #f0f1f5!important;white-space: nowrap;font-weight:400;font-size:14px!important;}
     
302. .ttp li.a a {background: transparent!important;color:#fff!important;}
     
303. .ttp li.a {background: #8c8e98!important;border-radius: 4px;}
     
304. .notice_pm, .notice_mypost, .notice_interactive, .notice_system, .notice_manage, .notice_app { display:none;}
     
305. .dopt .px{float: left;width:50%!important;}
     
306. .tfm th {padding-top: 9px;padding-right: 5px;width: 10px;white-space: nowrap;}
     
307. .tfm .pt, .tfm .px {margin-right: 3px;width: auto!important;}
     
308. .dt th {white-space: nowrap; width:auto!important;}
     
309. /*外加*/
     
310. .t_f * { font-size:15px!important; font-style:normal!important;}
     
311. .sign { display:none;}
     
312. #wechat_float_qrcode, #jz52top { display:none;}
     
313. #g_commend .xld dt{ display:none;}
     
314. #g_commend .xld dd.xg1{ display:none;}
     
315. #f_pst .pbt .px { width:96%!important;}
     
316. .un_selector input {width:96%!important;}
     
317. .pmform .tedt {width:90%!important;}
     
318. 
     
319. #scform_srchtxt { width:150px!important;}
     
320. #scform_tb a { margin: 0 12px 0 3px!important;}
     
321. .slst { width: inherit!important; }
     
322. #pic_v_big { clear:both; width: auto; margin:0 auto; overflow:hidden; }
     
323. #pic_v_big img{ width:auto; margin:0 auto; max-width:100%!important;}
     
324. .focus { display:none;}
     
325. 
     
326. 
     
327. }
     
328. 
     
329. @media screen and (max-width:470px) {
     
330. .effects_box { clear:both; margin: 0 auto; height:auto; overflow: hidden; }
     
331. .effects_box_in { margin:0 auto; width:256px;}
     
332. .effects_box .img_box {float: left; margin:0 auto; clear:both;display:inline;width:256px;padding:10px 8px 10px 8px; overflow:hidden;}
     
333. .effects_box .box_in{display:block;width:240px;height:265px;border:#e3e8ee 1px solid;overflow:hidden;box-shadow: 2px 2px 2px #e3e8ee;border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;}
     
334. }

คัดลอกไปที่คลิปบอร์ด

อย่าถามหาบัค เพราะมีแน่นอน มีเยอะด้วย 555 เอาไปลองไปปรับแต่งดูละกันนะครับ

beerqazasa

อย่าลืมโค้ดนี้

1. <meta name="viewport" content="width=device-width, initial-scale=1">

คัดลอกไปที่คลิปบอร์ด

ใส่ใน tag head

submark

โค้ดนี้ใช้ไม่ได้กับทุกแม่แบบนะครับ
ผมลองแล้ว
BEFORE

AFTER

pphum

beerqazasa ตอบกลับเมื่อ 2016-3-14 17:31
อย่าลืมโค้ดนี้

ใส่ใน tag head

โอ้ลืมไปเลย ใช่ๆ

pphum

submark ตอบกลับเมื่อ 2016-3-14 19:55
โค้ดนี้ใช้ไม่ได้กับทุกแม่แบบนะครับ
ผมลองแล้ว
BEFORE

<meta name="viewport" content="width=device-width, initial-scale=1"> ใส่ตัวนี้ในแท็ค head ด้วยนะครับ

submark

pphum ตอบกลับเมื่อ 2016-3-14 23:32
ใส่ตัวนี้ในแท็ค head ด้วยนะครับ

ใส่ไปเรียบร้อยตั้งแต่ครั้งแรกแล้วครับ เป็นอย่างที่โพสต์ไป

kingkitb

Discuz ปกติไม่ได้ทำมาเพื่อ Responsive นะ
การแสดงผลทั้งเว็บจะล้นออกจากขนาดจออยู่ดี

เพิ่มเนื้อหา (2016-3-15 07:17):
ไม่งั้นต้องแก้ส่วนอื่นด้วย

pphum

submark ตอบกลับเมื่อ 2016-3-15 00:58
ใส่ไปเรียบร้อยตั้งแต่ครั้งแรกแล้วครับ เป็นอย่างที่โพสต์ไป

ลองกับสกินดีฟอล ได้ไหมครับ

notkii

มันทำได้นะครับ แต่ว่าถ้าจะทำจริงๆอะบอกแค่นี้ไม่พอหรอกครับ

TuMTheTasTo

submark ตอบกลับเมื่อ 2016-3-14 19:55
โค้ดนี้ใช้ไม่ได้กับทุกแม่แบบนะครับ
ผมลองแล้ว
BEFORE

อยากได้แม่แบบ ตัวนี้ จัง ขอ ได้ไหม ครับ ^)^