[問題] 底部延伸版面的置底圖如何RWD

作者: yanggh (yanggh)   2014-12-01 23:21:32
想請前輩幫忙解題@''@
網址如下,是wordpress網站
http://vinoza.com/
主角是底部「未成年請勿飲酒」的警語橫幅
目的是要讓它全站置底,但要能RWD
我用的方式是在佈景設定裡新增下列CSS
body { margin-bottom: 55px; background-color: #652164; }
用意是讓底部多出額外55px的空間來放置底橫幅,不然會蓋到Footer
#show_in_foot { width:100%; height: 70px;
position: fixed; bottom: 0px; left: 0px;
z-index: 9999;
background: url (網址太長了這裡就省略)
top center no-repeat; background-color: #652164; top center no-repeat }
置底橫幅圖的語法,但好像有多餘或不準確的地方
而且怎麼改都沒辦法有RWD的效果
請教是否要從容器或其他地方去改呢?
還是這段CSS應該怎麼改?
google過後試過修改該元素的position, float等CSS語法,但都不對>''<
感謝~
作者: GoalBased (Artificail Intelligence)   2014-12-01 23:26:00
你要甚麼效果= =?頂多就加一個 text-alxxx:center ?你的會怎樣? 字被切掉嗎?台啤那個網址有問題你給的兩個網站都有縮小阿@@截個塗圖來看看?阿..你是不是說,你的解析度太小,小到比字還小的時候你的字左右都會被截掉,台啤只有右邊?
作者: mmis1000 (秋月戀楓)   2014-12-01 23:36:00
多做幾個不同寬度的橫幅(最小的建議320px),然後用media query切換吧?你給的網站都是固定寬度,根本沒做rwd啊?用個容器裝呢?http://jsbin.com/tumef/4試著改變銀幕比例看看http://jsbin.com/giyode/1跟原本的padding跟背景色會衝到
作者: qazwsx9006 (松鼠!碰器!)   2014-12-02 00:12:00
容器裝+1,如果不用容器的話應該就background-size: 100%; background-position:center但放太大會切到
作者: mmis1000 (秋月戀楓)   2014-12-02 00:28:00
background-position:center;在android內建上似乎有問題對會被裁到的圖會歪掉
作者: qazwsx9006 (松鼠!碰器!)   2014-12-02 00:38:00
mobile經驗太少,學到了~!
作者: mmis1000 (秋月戀楓)   2014-12-02 00:55:00
http://jsbin.com/mutohe 如果不考慮支援度,單用bg似乎也可行4.x的似乎修好了,應該可以用了,反正2.x也不常見了之前在舊android上,發現圖被裁到時,變成切齊上緣而不設定的置中,不過新版android(4.3)正常我也沒確認過是哪個版本以後才修好的
作者: yanggh (yanggh)   2014-12-02 01:48:00
好嚴謹啊!這樣已經很足夠使用了,再次感謝

Links booklink

Contact Us: admin [ a t ] ucptt.com