雖然標題說不用Media Queries，但我還是要在開頭講清楚，本文并不是要大家丟掉Media Queries，也不是要抨擊Media Queries。Media Queries實際上非常有用，我在各種地方都會用到。但Media Queries并不能解決所有的自適應的設計問題

本文要解決的是根據元素所在的組件本身的大小來決定元素的排列，而不是整個視窗的寬高的問題

第一種. flex-wrap的Flexbox

Flex-wrap可以解決很多和容器大小相關的自適應性問題。例如，如果有足夠的空間，那就把兩個元素并排陳列；如果沒有足夠空間，就把這兩個元素上下排列

沒有什么華麗的技巧，就是用了flex-wrap的Flexbox，非常完美。Flexbox可以用在很多種情況下，比如下面這個兩列的情況，不過這個例子其實是我簡化后的。核心部分其實非常簡單

第二種. 神奇四劍客

使用width,min-width,max-width以及calc（也就是“神奇四劍客”）來創建一個基于分隔點(25em)的寬度變化解決方案，是Rémi Parmentier的點子。這最初是用來做自適應的郵件模板，然后就擴展到了平常的web頁面，現在以及發展到，可以用來創建各種自適應的模塊

這個方法在width是百分比的時候很有效，也就是元素寬度是所在容器寬度的百分比的時候有效。然后，calc函數將該值與所需的斷點做減法，如果寬度值小于斷點，那會得到一個非常大的正數，或者如果寬度值大于斷點，那會得到一個非常大的負數，或者兩者完全相等，得到零。但是有max-width 和min-width 對較大的正數或者負數進行封頂

這里，我們的斷點設的是25em。字號是16px的話，就相當于400px。如果容器寬度在400px及以上，也就是大于或等于斷點，該元素的寬度就是0了，(400 - 400 = 0) * 1000 = 0或者(400 - 401 = -1) * 1000 = -1000

像這樣的情況，min-width就會生效，元素的寬度就會變成50%。然而，如果容器的寬度是399px或者更低（也就是比斷點更小），那么這個元素的寬度就是個很大的正數：(400 - 399 = 1) * 1000 = 1000

這樣的話，max-width就生效，最后的結果就是100%。下面這個圖也許可以幫你理解這個邏輯

這里上面的圖表示當斷點距離400px小于容器寬度100%的時候，因為結果會是一個非常大的負值，所以就會取min-width的寬度，也就是父容器的50%

這里下面的圖表示當斷點距離400px大于容器寬度100%的時候，因為結果會是一個非常大的正值，所以就會取max-width的寬度，也就是父容器的100%

下面的幾個demo使用了上面的這些技巧，通過不同的方式來切換元素的寬度以適應其容器寬度

2.1 浮動圖片：整體和部分的寬度處理

這個例子里，我會使用神奇四劍客和float屬性，闡述如何根據斷點確定容器的寬度來切換圖片顯示的方法(圖片占容器的所有寬度和容器的部分寬度的方法)

這里當屏幕大于等于40em的時候，添加md-50類的div的最大寬度是50%，而如果屏幕小于40em的時候就不再遵循這個css樣式

然后計算圖片容器div所占據的寬度，因為圖片已經100%充滿圖片容器，所以圖片容器到底占據屏幕的一半還是全部就成為圖片是怎么展示的關鍵了，這里當大于斷點的時候就會取最大值max-width–100%，也就是占據屏幕展示區域的全部，所以此時圖片就在全部的展示區域內顯示，而如果小于斷點的時候就會取最小值min-width–50%，也就是圖片占據屏幕展示區域的一半顯示

這里首頁展示區域大于等于40em，所以div的寬度是展示區域的50%，而圖片容器小于斷點，所以取min-wdith占據展示區域的一半

這里首頁展示區域小于40em，所以div的寬度是展示區域的100%，而圖片容器大于斷點，所以取max-wdith占據展示區域的全部

這里就是根據外部容器不同的寬度來決定內部圖片是怎么排列的

2.2 浮動圖片的顯示和隱藏

接著上面的例子，我改了一下計算邏輯，去掉了min-width，好做一個開關。這個方法在容器寬度較小時可以有效節省可用空間

當小于25em的時候，width變成0或者負值，那么圖片容器便會消失

這里也是根據外部容器的變化來決定內部圖片是展示還是隱藏的效果

2.3 文字和圖片：覆蓋和堆疊

和前例的代碼相似，不過我又額外增加了一個div來把文字覆蓋到圖片上，但如果圖片過小，那么反而文字會讓圖片不清晰，這時就把文字排放在圖片下。這個技巧有些復雜，所以我在這解釋一下

這里，負的margin會把文字的位置上移，好讓它能夠覆蓋圖片區域。隨著容器寬度變小，我需要讓它消失，否則它就會覆蓋圖片，但由于此時沒有min/max-width的屬性限制，我們就不能用神奇四劍客的方法做到這一點

不過好在有另一種方法，如果padding是百分比數值，那么它就是容器寬度的百分比，而padding-top和padding-bottom都會影響元素的高度，這樣就能通過容器寬度的變化達到間接控制容器高度的辦法。了解這一點以后，我們就可以創造一個根據容器寬度變化而變化的padding-bottom

padding-bottom:calc((30em - 100%) * 1000)

我們不能給這個.pull 的div直接使用min/max-padding的類似方法，因為沒有這樣的屬性；正確的做法是設法給這個padding加一個開關，這個開關是通過增加一個偽元素并控制這個偽元素的高度實現的，當寬度變化到30em的時候這里padding-bottom就變成了0，那么偽元素就不存在了，偽元素不存在那么pull這個div也就不存在了

這里展示了根據外部容器的變化來決定內部文字容器是怎么覆蓋圖片的

總結

以上是生活随笔為你收集整理的CSS之不使用Media Queries的自适应CSS的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。