Question

我的网站风格分为两部分：

public static DateTime? ParseDate_MMMdyyyyhhmmtt(string date)
{
    if (date == null)
        return null;
    if (date.Length < 14)
        return null;
    if (date.Length == 14)
        date = date.Insert(3, "0");
    DateTime dt;
    if (DateTime.TryParseExact(date, "MMMdyyyyhhmmtt",
                               CultureInfo.InvariantCulture,
                               DateTimeStyles.None, out dt))
        return dt;
    return null;
}

尽管目前的屏幕尺寸更宽，我仍然希望强制使用小屏幕风格。所以，基本上，我想在桌面上强制移动外观。

请记住，我没有选择在css中更改太多内容，并且样式应保留在媒体查询中。

实现这一目标的最佳方法是什么？我更喜欢使用JavaScript的解决方案。

Answer 1

我不确定是否可以强制为不匹配的媒体呈现媒体查询样式。不过，我觉得你已经很清楚地展示了这个挑战，所以我建议你如何以我认识的方式解决这个问题。

CSS的工作方式，您编写的任何规则都将应用于所有匹配的元素，除非更具体或更新的内容覆盖它。

由于您知道在移动设备上总是需要移动设备样式，因此通过从移动设备样式中删除媒体查询，您可以将移动设备显示设置为默认外观。

由于您只知道有时（即使“有时”真的“几乎总是”）想要为更大的屏幕显示桌面样式，您可以设置自己的方式来切换他们。对我来说，最简单的方法是在body标签和每个桌面声明的开头添加一个ID。

//small screen styles
    /* a lot of styles for small screens */

//conditional wide-screen styles
@media only screen and (min-width: 725px) {
    #wideLayout //styles
    #wideLayout //styles
    #wideLayout //styles
}

如果您的CSS排列方式如此，则只有当屏幕足够宽且时才会应用宽屏幕样式，其中包含ID为#wideLayout的顶级父级。并且（根据要求）您只需切换该ID即可使用javascript切换这些样式。

示例：

$('#toggleLayout').on('click',function(){
  if ($('section').attr('id') == "wideLayout"){
    $('section').attr('id','');
  } else {
    $('section').attr('id','wideLayout');
  }
});

/*small screen styles*/
  div {background-color:#484;display:inline-block;width:50px;height:50px;margin:10px;}
  
    
/*conditional wide-screen styles*/
/*I changed the query here so the preview window would be wide-enough to demonstrate*/
@media only screen and (min-width: 125px) {
    #wideLayout div {background-color:#848;display:block;width:auto;height:80px;margin:10px 0 0 0;}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button id="toggleLayout">Toggle Layout</button>

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</section>

这是一个可以用来解决我的解决方案的jsfiddle：https://jsfiddle.net/sq8jhu93/2/

无论屏幕大小如何，如何从JS强制使用CSS @media样式？

1 个答案: