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

I'm trying to to apply a different css style to my websites as soon as the width of the document is lower than 700px and again when its lower than 500px (smartphone). The code I have is the following, what do I do wrong?

我试图在文档宽度低于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');
    }
}

EDIT: works perfect in a normal browser

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

2 个解决方案

#1

There's a standard feature of CSS allowing just this : having sets of rules which apply for certain conditions, for example window size.

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

This feature is called media queries. Here's the MDN documentation.

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

You would have for example

你会有例如

/* 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;
    }
}

#2

Solution:

解：

Use Media Queries instead.

请改用媒体查询。

What is it?

它是什么？

Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone vs. high definition screen). It became a W3C recommended standard in June 2012 and is a cornerstone technology of Responsive Web Design.

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

How to use it?

如何使用它？

You can find a guide here and some real world examples here.

你可以在这里找到一个指南和一些现实世界的例子。

Example:

例：

// 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' />

The advantage of splitting CSS in two different files make easier to maintain and mobile.css won't be imported if your user is on a desktop.

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

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

The advantage of specifying all CSS styles for all resolutions in one file (default.css) is that if you are on a desktop and resize your browser window your website will automatically adapt. To improve maintenance you may want to split to a file per device type but import all the files in all pages.

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

Note:

注意：

There are many ways to implement this, like mobile-first or desktop-first. As per your question in all cases you don't need to change your HTML, but only specify resolution criteria for each group of style (in a separated CSS file or not).

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

You can look at my examples above, but if you are interested by real example you can find a lot on the Web. I let you resize your browser window on the Microsoft home page and look at how elements change (menu, carousel, columns, ...).

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

Going further:

更进一步：

There are lots of frameworks on the Web that help you to do great things. I particularly like Bootstrap (Grid example) but there are other alternatives.

Web上有许多框架可以帮助您做出很棒的事情。我特别喜欢Bootstrap（Grid示例），但还有其他选择。

#1