瀏覽單個文章
SpeedRossi
Advance Member
 
SpeedRossi的大頭照
 

加入日期: Dec 2001
文章: 485
Talking 關於寬度的說明

寬度限制是這次的新樣式的重點之一
就是限制住最大寬度,避免內容超出螢幕顯示範圍
首先我把已經把發言者欄的寬度定為220px
然後再把文章欄的寬度定在1410px
以確保不會內容超過寬度1680px的顯示範圍

通常什麼時候會超出顯示範圍勒?
我知道的兩種狀況是過大的圖片和過長的字串 (如果還有其他情況請跟我說)
就像下面那樣∼

寬度1920px的圖


過長的字串
==========================================================================================================================

如果已經套用了新的樣式
情況應該就會像是這樣


圖片會被縮到寬度1410px的大小
而字串的話超出寬度的部份就捨棄
不會超出螢幕顯示範圍,不會出現橫向捲軸
這樣的作法目前我測試的情況是都OK
沒有發生什麼不好的後遺症




但是

還是有一個問題
那就是這個UserStyles只有在寬度1680px的螢幕才會有最佳效果
套用在解析度不足或超過的螢幕上都會有缺陷
好吧,那這樣就只好請網友自行修改吧

為了方便搜尋
先把整個UserStyles複製到筆記本
然後用"文章欄最大寬度調整"這個詞去搜尋
會發現下列代碼...
代碼:
/*文章欄最大寬度調整*/
TD[style="border-bottom: 1px solid rgb(58, 110, 165);"] > DIV {
	max-width: 1410px !important;
	overflow: hidden !important;
	white-space: normal !important;
}
TD[style="border-bottom: 1px solid rgb(58, 110, 165);"] > DIV > img,
TD[style="border-bottom: 1px solid rgb(58, 110, 165);"] > DIV > font > img {
	max-width: 1410px !important;
}


如果要用找的,那大概就是....

-------------------------------------------------------------------
/*=====全域================*/
.....
/*=====討論文章列表===========*/
.....
/*=====文章================*/
.....
/*-----主文章表格-----*/

/*文章欄最大寬度調整*/
TD[style="border-bottom: 1px solid rgb(58, 110, 165);"] > DIV {
max-width: 1410px !important;
overflow: hidden !important;
white-space: normal !important;
}
TD[style="border-bottom: 1px solid rgb(58, 110, 165);"] > DIV > img,
TD[style="border-bottom: 1px solid rgb(58, 110, 165);"] > DIV > font > img {
max-width: 1410px !important;
}
.....
....
...
..
.
-------------------------------------------------------------------

重點就是要修改那個max-width的值,兩個都要改
我想寬度1920px的螢幕應該是要修改成1650px左右吧
我沒有寬度1920px的螢幕,沒辦法實際測試
如果還有更好的值就跟我說一下吧
至於其他螢幕解析度的使用者就請自行試驗吧

想要看更多縮小圖片的效果可以看看這一串:『圖大且多低頻寬勿入』NBA 2K9(1920x1200x8FSAA貼圖)
裡面的圖片就像標題所說的
在欣賞2K9的漂亮畫面之餘順便拿來測試一下縮圖效果
印象中Firefox 3有用到顯示卡加速功能
可以讓圖片縮放後的效果更好
我這邊看起來是不錯啦


有關於寬度的說明就到此結束
PCDVD和Badongo的UserStyles又有小部份更新
請重新套用,這次修改的部份是針對過大的簽名檔圖片
代碼:
/*簽名檔的圖片*/
TD[style="border-bottom: 1px solid rgb(58, 110, 165);"] > DIV > img {
	max-height: 200px;
}

這次是限制圖片的最大高度,預設值暫定為200px
先這樣測試一段時間,有問題的朋友請反應給我,再看看要怎麼處理
     
      
__________________
 用Firefox+Stylish調整PCDVD版面 - 2008/12/29更新,
 用Stylish解決Firefox顯示過長網頁不完全的問題 - New!!!
 簡單化的Yahoo!奇摩字典 - 好用!!!
 UserStyles for Badongo!! - 2008/12/06更新,吃便當輸入驗證圖不再吃力
 讓EvadeFilter變得不礙眼 - 2008/06/30更新,在FF3上正常了!
 以上皆適用於 Firefox 3 + Stylish 0.59
 Stylish 1.0以上的版本已經出了,但我用不習慣,所以以上的UserStyles皆只有在Stylish 0.59上測試。
舊 2008-12-07, 12:54 AM #11
回應時引用此文章
SpeedRossi離線中