如何使用javascript觸發用戶需求的媒體查詢

Question

我有一個響應式網頁，針對不同的屏幕尺寸設計了不同的設計，我正在使用@mediaquery來改變我的設計。 即使屏幕尺寸沒有變化，我也希望用戶能夠更小或更大的屏幕尺寸更改設計。

是否可以使用js觸發@mediaquery而不改變其大小？

Answer 1

看看Enquire.js ，一個用於響應CSS媒體查詢的輕量級純JavaScript庫。

有了它，您可以根據屏幕的寬度向body添加一個class 。 然后根據主體是否具有某個類來組織CSS。 您可以使用JS根據用戶選擇動態地將這些類添加到正文中。

你可以用另一個JS庫做同樣的事情： MediaClass ，JS的以下幾行：

MediaClass("small-screen", "body(this-max-width: 480px)");

如果body的寬度低於480px則將類small-screen到body標簽。 現在，您可以在站點中添加一些按鈕來更改正文的寬度，並且如果您按照這種方式設置CSS類，則會改變頁面的布局，而不是基於屏幕大小“僅”。 因此，對於這兩種方法，您需要對CSS進行一些重構。