Q

設置元素的寬度和高度的最佳方法是什麼？

2014-02-18 144 views 2 likes

2

每個網站都有元素，它們的寬度和高度必須設置。這裏是我的問題我們如何設置寬度和高度，使網站能夠在不同寬度/高度的不同顯示器上正常工作？是px優先於%？當我們應該px和什麼時候應該使用％？每個人的優點和缺點是什麼？設置元素的寬度和高度的最佳方法是什麼？

2014-02-18 Drupalist

+2

這取決於你閱讀http://alistapart.com/article/responsive-web-design/和http://alistapart.com/article/fluidgrids讓你開始。 –

+1

寬度和高度不一定要特別設置在網站上的元素上，當然它們可以但不一定是如果你是設置寬度，它將取決於你的網站是固定寬度還是響應/自適應 –

+0

它們用於不同的目的，具有彈性或靜態尺寸有其優點/缺點，但更重要的是，對特定設計決策做出響應 –

A

回答

2

當您想要以像素爲單位指定固定/靜態高度時使用px。％是指元素父項的總數百分比。使用百分比表示當瀏覽器調整大小時，網站將適應使用像素的情況。

您選擇哪一個的確取決於您嘗試實現的外觀和感覺。

2014-02-18 17:02:28

+0

當我使用px並調整瀏覽器大小時，會出現滾動條，但是當我使用'％'並調整瀏覽器的大小，那麼所有的網站都會失靈，我該怎麼辦？ – Drupalist

+0

你的意思是瀏覽器上的滾動條嗎？在您調整瀏覽器窗口時使用它無法調整大小的像素，以便它添加滾動條以允許您查看所有內容。如果你使用百分比，那麼它會嘗試調整內容以適應瀏覽器窗口，因此不需要滾動條。但是，您可以使用overflow css屬性將滾動條添加到任何元素。 –

2

這一切都取決於您的網站的類型以及您想如何響應各種屏幕分辨率。

只需使用% and px是不夠的，也有其他單位的文字大小例如em and pt等

另外，我們有media queries

http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

http://msdn.microsoft.com/en-us/magazine/hh653584.aspx

http://www.htmlgoodies.com/html5/client/common-techniques-in-responsive-web-design.html#fbid=YIeEpYZXBt-

相應SO問題Responsive Layout - PX, EM, or %?

2014-02-18 17:05:10 Rex

1

這一切都取決於你計劃做什麼樣的網絡。

許多網頁使用像素上具有固定寬度的容器（如960像素）。那麼如果您在photoshop，illustrator，indesign等上進行了精心設計的預先設計以處理像素，那麼這非常容易。儘管這些網頁在PC屏幕外運行的效果不佳，就好像您的窗口寬度小於容器的內容將不會顯示，除非水平滾動。

現在，如果您希望自己的內容適應任何水平寬度，您應該使用％但是imo會非常困難，並且您需要清楚瞭解在開始工作之前要在每個可能寬度上顯示的內容。

如果您決定採用「響應式」設計......工作將會更加困難。我建議你使用這樣的東西：

@media screen and (min-width:600px) {} 
@media screen and (min-width:800px) {} 
@media screen and (min-width:1024px) {} 
@media screen and (min-width:1524px) {}

在你的CSS來啾啾你的課每個寬度（或平臺）需要wahtever需要。（還有很多其他有用的@medias

2014-02-18 17:12:20

相關問題