当页面宽度未来或等于400 px时，你可以将这个规则设置为最大宽度的50%，当页面宽度大于或等于400 px时，设置为最大宽度的200 px。这听起来很像媒体查询！我首先处理较小的屏幕宽度，然后覆盖较大的宽度，这就是CSS：

.some_element {
  background: red;
  float: left;
  width: auto;
  max-width: 50%;
}
@media (min-width: 400px) {
  .some_element {
    max-width: 200px;
  }
}

如果愿意，可以交换50%和200px，也可以将min-width更改为max-width。

不能同时将max-width设置为200 px和50%。您可以将该元素放入另一个max-width为400 px的元素中：

<div id="parent">
    <div id="child">Text here</div>
</div>

#parent {
    background-color: red;
    max-width: 400px;
}
#child {
    background-color: green;
    max-width: 50%;
}

<div id="parent">
    <div id="sub">test content</div>
</div>

//参数设置

#parent {
    max-width: 200px;
}
#sub {
    width: 50%;
}

创建单独的类并基于outerWidth（）动态添加它们

.some_element {
        background: red;
        float: left;
        width: auto;
    }

    .widthClass1{
     max-width:50%;
    }

    .widthClass2{
     max-width:200px;
    }

    $(document).ready(function(){
       if($("textDiv").outerWidth()<400){//instead of dividing by 2 I am comparing with 400
         $("textDiv").addClass('widthClass1')
       }else{
         $("textDiv").addClass('widthClass2')
       }
    });

您可以尝试如下所述

.some_element {
    background: red;
    float: left;
    width: auto;
    width: 50%; 
    max-width: 200px;        
}