PCDVD數位科技討論區 - [分享]用Stylish調整PCDVD的版面

寬度限制是這次的新樣式的重點之一
就是限制住最大寬度，避免內容超出螢幕顯示範圍
首先我把已經把發言者欄的寬度定為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貼圖）
裡面的圖片就像標題所說的 :laugh:
在欣賞2K9的漂亮畫面之餘順便拿來測試一下縮圖效果
印象中Firefox 3有用到顯示卡加速功能
可以讓圖片縮放後的效果更好
我這邊看起來是不錯啦 :D

有關於寬度的說明就到此結束
PCDVD和Badongo的UserStyles又有小部份更新
請重新套用，這次修改的部份是針對過大的簽名檔圖片

代碼:

/*簽名檔的圖片*/
TD[style="border-bottom: 1px solid rgb(58, 110, 165);"] > DIV > img {
	max-height: 200px;
}

這次是限制圖片的最大高度，預設值暫定為200px
先這樣測試一段時間，有問題的朋友請反應給我，再看看要怎麼處理