3

一旦文档的宽度低于 700 像素，当文档的宽度低于 500 像素（智能手机）时，我就会尝试对我的网站应用不同的 css 样式。我的代码如下，我做错了什么？

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');
    }
}

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

4

2 回答 2

10

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

此功能称为媒体查询。这是MDN 文档。

例如，你会有

/* 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;
    }
}
于 2013-08-17T18:57:43.027 回答
5

解决方案：

请改用媒体查询。

它是什么？

Media Queries 是一个 CSS3 模块，允许内容渲染适应屏幕分辨率等条件（例如智能手机与高清屏幕）。它于 2012 年 6 月成为 W3C 推荐标准，是响应式 Web 设计的基石技术。

如何使用它？

您可以在此处找到指南，并在此处找到一些真实世界的示例。

例子：

// 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 文件中）。

你可以看看我上面的例子，但如果你对真实例子感兴趣，你可以在网上找到很多。我让您在Microsoft 主页上调整浏览器窗口的大小并查看元素如何变化（菜单、轮播、列...）。

更进一步：

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

于 2013-08-17T18:58:08.547 回答