Question

我正在尝试创建一个包含3个版本的1张幻灯片包含1张图片的横幅。

我知道如何使用display：none，但这意味着所有内容都已加载，这将影响慢速网络或移动设备的加载速度。

我不是javascript或jquery wiz所以请越简单越好。

我想做的是：

屏幕分辨率高达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＆＃39> ：

执行此操作

@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.
}

如果将window.innerWidth值存储在width变量中，您也可以稍微简化此代码，如下所示：

var width = window.innerWidth;

然后您可以使用if(width > 620){/* Code here */}检查窗口宽度是否大于620px。

现在，您将创建两个或更多页面，每个页面都有一个修改，然后如果屏幕大小为X，则将用户发送到另一个页面。为此，您只需在上述location.href="#";内使用if，并将“＃”替换为其他网页网址。

处理页面调整大小：

上面的代码是关于如何检查用户窗口宽度的示例，但是浏览器将在页面加载时运行此代码，仅一次，但不会在调整大小时运行。要在浏览器调整大小的任何时候运行此代码，您需要将这些if包装在一个函数中并使用EventListener调用它，这将在调整浏览器大小时对代码进行调用。

最终代码结果：

这是移植到函数的最终代码，在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

在屏幕尺寸上显示内容

3 个答案:

最终代码结果：

这是移植到函数的最终代码，在EventListener中调用并将用户发送到另一个页面：