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

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) { ... } 

指定所有的CSS样式在一个文件中（default.css）所有决议案的好处是，如果你是在桌面上，并调整您的浏览器窗口，您的网站会自动适应。为了改善维护，您可能希望将每个设备类型分割为一个文件，但导入所有页面中的所有文件。

注：

有实现这一点，像移动第一或台式机的第一多种方式。在所有情况下，根据您的问题，您不需要更改HTML，但只需为每组样式指定分辨率标准（在独立的CSS文件中）。

你可以看看我上面的例子，但如果你真的感兴趣的例子，你可以在网上找到很多。我让你在Microsoft home page上调整你的浏览器窗口，看看元素是如何变化的（菜单，轮播，列，...）。

进一步说：

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