在響應式設計中使用％單位有什麼意義？

我正在重新設計我的網站，因爲在不同的分辨率（除了設備）上看起來很糟糕，大多數指南和教程依賴於%和em比固定值。我仍然在學習，所以我正在閱讀所有內容。在響應式設計中使用％單位有什麼意義？

認爲這將解決不同尺寸顯示器的問題，但我們必須製作更多的CSS來解決一些特定的問題。

如果我需要爲額外的顯示尺寸添加媒體查詢，爲什麼使用％然後呢？使用％真的減少編碼嗎？是否需要爲某些尺寸添加一些額外的CSS或我做錯了什麼？

感謝您的任何建議！

2012-07-25 Diana

說'東西是'10px'沒有留下任何改變的餘地。但是說它是'1em'還是'50％'使其完全依賴於其他事物，從而導致流體/靈活變化。 – 2012-07-25 21:55:20

使用em尺寸的目的是爲了讓您的設計脫離用戶選擇的字體大小。我可能會使用更大的字體，因爲我有一個巨大的顯示器和視力不佳，而其他人可能更喜歡更小的字體。通過使用em單位，您的設計將兼容我們的字體首選項並相應地調整大小，而不是強制字體大小達到給定的標準（例如「12點字體」）。

以類似的方式，百分比（％）單位允許您的設計響應不同的瀏覽器大小。與em單位一起使用時，這將允許基於文本的元素響應任意字體大小選擇，並且佈局元素可響應任意瀏覽器大小。

爲所有媒體類型設計單一響應式設計是完全可以接受的。 Media queries適用於不同設備的不同顯示樣式，而不是「支持」不同的顯示尺寸。一個例子是在印刷媒體上使用襯線字體和在顯示媒體上使用無襯線字體，因爲可用性研究表明這些字體是這些媒體的首選。

此外，它允許您爲移動設備等某些情況執行自定義樣式，您可能想要考慮用戶具有有限的帶寬量並可能減少額外的圖像。或者，如果您想要以完全不同的佈局顯示某些手機提供的顯微屏幕的內容。

2012-07-25 22:01:51

謝謝explain.It似乎創建一個適應性良好而不使用媒體查詢的響應結構是相當困難的。大多數問題我表面上是寬度是％，我設置了固定大小的填充，所以效果很差:( – Diana 2012-07-26 00:32:05

%允許您的網站響應用戶的查看方法。假設您的div位於100%。它將填滿整個部分，無論它是在手機還是桌面上。

應該可以爲尺寸添加額外的CSS。據我所知，您可以在%中顯示一些元素，其中一些元素的固定值爲px，儘管他們可能會與衝突，具體取決於頁面的設置方式或正在查看的內容。

2012-07-25 21:59:55 jzacharia

例如。

您的網站標題的寬度爲950px;但在移動設備中，它可能適合450px;

因此，您使用media-query重新定位某些元素並處理一些尺寸問題，並將標頭寬度設置爲450px;

但是，如果您使用％值，則可以將標題div設置爲在其父項中具有100％的寬度基數。所以你只能改變身體或者一些容器的div寬度，所有的孩子都會適應。

2012-07-25 22:01:33

戴安娜，

我很高興我遇到了這個問題。我實際上剛剛上傳了我的第一個響應式設計，當涉及到字體大小和寬度時，它的百分比爲90％。

顯然，這看起來並不驚人，並且圖像看起來出路的地方......但是，幫我一個忙，並調整您的瀏覽器窗口，慢慢使它越來越小。我是通過設置一個百分比寬度來實現的！

相信我，我試過用像素做這個響應式設計測試，結果並沒有太好。百分比寬度確保無論分辨率和/或像素尺寸（本身）如何，設計將始終迎合屏幕的大小。另外，我不必使用一個CSS3媒體查詢，但我強烈建議只在需要時才使用CSS3媒體查詢。

在我看來，我應該有一個更大屏幕的媒體查詢。

我希望這可以幫助您儘可能多地幫助我！謝謝，亞倫

2012-07-25 22:05:37

回答