我試圖創建一個固定寬度(970像素)的網站,並希望確保它被調整爲任何潛在的用戶屏幕尺寸,但瀏覽器會繼續顯示它以及我的整個屏幕寬度創建的頁邊距。如何將網頁寬度(以像素爲單位)縮放到任何屏幕尺寸?
3
A
回答
1
您不應該設置寬度。默認情況下,頁面內容將展開以填充整個屏幕。
如果你需要找到一個元素的實際寬度,你總是可以找到。如果你使用的是jQuery,那麼它就是
var width = $("#my-element").width()
0
如果明白你在找什麼,那聽起來就像你錯誤地設置了你的邊距。 居中你的內容,你會希望你的代碼看起來是這樣的:http://jsbin.com/uyolo4/4/edit
3
2
這不是一個液體的佈局,你後,但一個「彈性」佈局,以「自動拉伸」附加腳本。
有幾個步驟來得到這個工作:
- 創建使用EMS的尺寸(而不是像素尺寸)佈局。這可以使佈局「可擴展」,同時保持其比例正確。
將比例值以百分比的形式應用於
<body>
元素。此默認設置是有用的,因爲它設置1EM等於爲10px在幾乎所有的瀏覽器:body {font-size:62.5%;}
這意味着你的佈局將有
97em
的寬度。- 使用javascript檢測用戶頁面的寬度,並調整主體上的縮放值以更改「縮放」以適合頁面。你會希望它至少運行一次,當頁面被加載時,並且可能在瀏覽器被調整大小的時候。
下面是彈性佈局一個很好的起點:http://www.alistapart.com/articles/elastic
相關問題
- 1. 如何修復頁面寬度以縮小屏幕尺寸?
- 2. android縮放位圖到屏幕尺寸
- 3. 獲取寬度(以像素爲單位)的高度尺寸(以%爲單位)
- 4. 位圖縮放以適應不同的屏幕尺寸/密度
- 5. Android屏幕尺寸縮放
- 6. 以像素爲單位的屏幕尺寸
- 7. 以像素爲單位的android設計的屏幕尺寸?
- 8. 如何將網站寬度從標準尺寸改爲寬屏?
- 9. libgdx如何將BitmapFont縮放爲更改屏幕尺寸?
- 10. 爲各種屏幕尺寸縮放ImageButton
- 11. Codename One:如何縮放圖像以適合屏幕寬度?
- 12. 以英寸爲單位查找屏幕尺寸不是使用javascript的像素
- 13. 如何處理不同的屏幕尺寸,以便textview縮放
- 14. 屏幕尺寸到圖像尺寸
- 15. 如何爲不同的屏幕尺寸設置自動寬度?
- 16. 將網頁縮放到不同屏幕尺寸的最有效方法
- 17. 縮放與背景圖像的DIV,以適應屏幕尺寸
- 18. Java - 使位圖縮放到您的屏幕尺寸?
- 19. 表不適合尺寸屏幕寬度
- 20. jQuery的 - 獲取屏幕尺寸寬度
- 21. 寬度變化與窄屏幕尺寸
- 22. 寬度100%大於屏幕尺寸
- 23. 縮放UIImageView以適合屏幕寬度
- 24. 如何縮放屏幕上的像素?
- 25. Windows 8.1應用程序屏幕尺寸以英寸爲單位
- 26. 以英寸爲單位獲取iPhone的實際屏幕尺寸
- 27. 如何根據屏幕尺寸爲元素製作動態寬度?
- 28. Android/eclipse:佈局內容可以縮放到屏幕尺寸嗎?
- 29. 如何設置單選按鈕的寬度以適應屏幕尺寸? (android)
- 30. 如何在所有屏幕尺寸的網頁上居中放置圖像
目前還不清楚你問這裏。我不明白'固定寬度'和'調整到任何屏幕大小'的含義......你的意思是你想要970像素寬的佈局「放大」以填滿屏幕?或者,您希望佈局保持970像素寬,無論屏幕尺寸是多少? – Beejamin 2011-05-27 23:41:43
是的,我寧願寬度填滿屏幕,不管它的大小。 – 2011-05-27 23:45:00
你的意思是你想要設計你的網站的固定寬度爲'970px',但你希望瀏覽器以某種方式「放大」,以便縮放所有東西以適應瀏覽器的寬度? – thirtydot 2011-05-27 23:59:32