Question

我试图在文档宽度低于700px时再次为我的网站应用不同的CSS样式，并且当它低于500px（智能手机）时再次尝试。我的代码如下，我做错了什么？

if($(document).width() < 749) {
    if($(document).width() < 700) {
        $('#cirkelcontainer').hide();   
        $('h3').css('word-wrap', 'break-word');
        $('.datum').css('width', '100%');
        $('.datum').css('color', 'black');
        $('.datum').css('margin-top', '13px');
        $('.datum').css('background-color', 'white');
        $('.datum').css('word-wrap', 'break-word');
        $('.datum').css('height', 'auto');
        $('.datum').css('margin-left', '-2%');
        $('#nieuwsnavlinks').css('width', '90%');
        $('#nieuwsnavlinks p').css('text-align', 'center');
        $('#nieuwsnavrechts').css('width', '228px');
        $('#nieuwsnavrechts').css('margin-left', 'auto');
        $('#nieuwsnavrechts').css('margin-right', 'auto');
        $('#nieuwsnavrechts').css('float', 'none');
        $('content').css('padding-bottom', '25px');
    }

    if($(document).width() < 500) {
        $('button').css('width', '100%');
        $('form button').css('width', '125px'); 
        $('#datum:nth-child(n)').hide();
        $('#nieuwsoverzicht:nth-child(n)').css({
            'width': '100%',
            'height': 'auto',
            'float': 'left'
        });
        $('nav ul ul li').css('border-left', '1px dotted black');
        $('#nieuwsoverzicht:nth-child(n) p').css('word-wrap', 'break-word');
        $('h4').css('word-wrap', 'break-word');
        $('content').css('width', '100%');
        $('.nieuwstext:nth-child(1)').find('a').html('&#x25C0;');
        $('.nieuwstext:last').find('a').html('&#x25B6;');
        $('#nieuwsnavrechts').css('width', '162px');
    }
}

编辑：在普通浏览器中完美运行

Answer 1

CSS的标准功能允许这样：具有适用于某些条件的规则集，例如窗口大小。

此功能称为媒体查询。这是the MDN documentation。

你会有例如

/* here the rules for small windows */
@media (max-width: 500px) { 
    #cirkelcontainer {
         display: none;
    }
    h3 {
         word-wrap: break-word;
    }
}

/* here the rules for windows between 500px and 900px */
@media (min-width: 500px) and (max-width: 900px) {
    form button {
         width: 125px;
    }
}

Answer 2

<强>解决方案：

改为使用Media Queries。

这是什么？

媒体查询是一个CSS3模块，允许内容呈现适应屏幕分辨率等条件（例如智能手机与高分辨率定义屏幕）。它于2012年6月成为W3C推荐标准并且是响应式网页设计的基石技术。

如何使用？

您可以找到指南here和一些真实世界的示例here。

示例：

// Inside HTML header: <link rel='stylesheet' href='css/default.css' /> <link rel='stylesheet' media='screen and (min-width: 500px) and (max-width: 700px)' href='css/mobile.css' />

在两个不同的文件中拆分CSS的优势使维护更容易，如果您的用户在桌面上，则不会导入mobile.css。

// Inside CSS file (default.css): @media screen and (min-width:500px) { ... }

为一个文件（default.css）中的所有分辨率指定所有CSS样式的优点是，如果您在桌面上并调整浏览器窗口大小，您的网站将自动适应。要改进维护，您可能希望按设备类型拆分为文件，但导入所有页面中的所有文件。

注意：

有很多方法可以实现这一点，例如移动优先或桌面优先。在所有情况下，根据您的问题，您不需要更改HTML，而只需为每组样式指定解决方案标准（在单独的CSS文件中）。

您可以查看上面的示例，但如果您对真实示例感兴趣，可以在Web上找到很多。我允许您在Microsoft home page上调整浏览器窗口的大小，并查看元素如何更改（菜单，轮播，列，...）。

更进一步：

网上有很多框架可以帮助你做出伟大的事情。我特别喜欢Bootstrap（Grid example），但还有其他选择。

如何根据移动设备的屏幕宽度更改我的CSS

2 个答案: