在屏幕尺寸上顯示內容

Question

我試圖創建一個橫幅，其中包含1張圖像的3張幻燈片。

我知道如何使用顯示來做到這一點：無，但這意味着所有的內容都被加載，它會影響慢速網絡或手機的加載速度。

我不是一個JavaScript或jQuery的奇才所以越簡單越好請。

我想要做的是：屏幕分辨率

高達620px

{加載這個HTML}上的屏幕分辨率

621px到920px

{加載這個HTML}

上的屏幕分辨率921px以上

{加載這個HTML}

這可能嗎？

Answer 1

你可以使用CSS屏幕查詢，處理這個問題，但像你說，這將加載所有這些，隱藏起來。所以你不得不走下JQuery的思路。

Answer 2

我認爲更好的方法來做到這一點與CSS。

每比如，爲了使所有圖像響應：

img { 
    max-width: 100%; 
    height: auto; 
} 

check the another tricks>>

或者你也可以通過@媒體做到這一點：

@media (max-width: 979px) { 
(css here - widths < 979) 
} 

@media all and (max-width: 767px) and (min-width: 400px) { 
(widths between 400 and 767) 
} 

@media all and (max-width: 399px) and (min-width: 0px) { 
(widths between 399-0px) 
} 

希望我幫助。

Answer 3

「這可能嗎？」

是的，但爲了保持代碼的簡單，你需要使用不同的方法：發送用戶根據自己的屏幕寬度的三個不同的頁面之一，而不是在同一加載新的div頁。我會解釋你如何一步一步做到這一點。在這裏，我們去：

如何用JavaScript檢查用戶的屏幕寬度：

if(window.innerWidth <= 620){ 
// The window width is less or equal to 620px. 
} 
if(window.innerWidth > 620 && window.innerWidth <= 920){ 
// The window width is greater than 620px and less or equal to 920px. 
} 
if(window.innerWidth > 920){ 
// The window width is greater than 920px. 
} 

您還可以，如果你存儲在width變量window.innerWidth值，這樣簡化這種代碼一點點：

var width = window.innerWidth; 

然後，您可以使用if(width > 620){/* Code here */}來檢查窗口寬度是否大於620px。現在

您將創建兩個或多個頁面，每一個與修改，然後向用戶發送到另一個頁面，如果他的屏幕尺寸爲X。要做到這一點你只需要使用location.href="#";上述if S的內部，並與其他頁URL取代「＃」。

處理頁面大小調整：僅

以上代碼是你如何可以檢查用戶窗口寬度的例子，但瀏覽器將運行這段代碼時，頁面加載，一時間，而不是在它的調整大小。爲了讓這段代碼隨時在瀏覽器調整大小時運行，您需要將這些if s包裝在一個函數中，並使用EventListener調用它，當瀏覽器被調整大小時，它會對代碼進行說明。

---

最終代碼的結果：

這裏是移植給函數的最終代碼，稱爲事件偵聽內部和發送用戶到另一頁：

function checkWidth(){ 
var width = window.innerWidth; 
    if(width <= 620){ 
    location.href = "#"; // The window width is less or equal to 620px. 
    } 
    if(width > 620 && width <= 920){ 
    location.href = "#"; // The window width is greater than 620px and less or equal to 920px. 
    } 
    if(width > 920){ 
    location.href = "#"; // The window width is greater than 620px. 
    } 
} 

window.addEventListener('resize', checkWidth); 
checkWidth(); 

JSFiddle Demo