11

我了解如何通过媒体查询（例如 media="screen and (max-width:640px)"）更改 CSS

但假设我想写（例如）

<div>
[if screen resolution is lower then 960 px]
    <div>
    some new text only for lower resolution
    </div>
[end of condition]
</div>

我需要写什么条件才能使它正确？

4

7 回答 7

8

据我所知，您不能在 HTML 页面中进行媒体查询。你需要在你的 CSS 中做这件事。

但是如果你只想在某个分辨率以下显示一些特殊的文字，为什么不只在分辨率低于 960px 时才显示呢？

创建响应式设计与常规设计非常不同，因为您必须考虑更多（这是 haaard）

于 2011-11-28T10:23:15.330 回答
5

您可以通过使用 javascript 屏幕对象来检查它：

screen.width

或者你可以用 css 做到这一点

<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />

http://css-tricks.com/6206-resolution-specific-stylesheets/ http://www.javascriptkit.com/howto/newtech3.shtml

于 2011-11-28T10:25:06.593 回答
3

您需要分配一个 id （或一个类或任何其他从 CSS 中查找元素的方式）<div>，然后您可以设置一个媒体查询定义，如下所示：

<div id="mydiv">...</div>
<style type="text/css">
@media screen and (min-width: 961px) {
   div#mydiv { display: none }
}
</style>

或者为了更好的可读性：使其默认隐藏并在max-width: 960px.

于 2011-11-28T10:24:55.310 回答
3

我实际上正在经历同样的情况，发现如果你想这样做，你真的可以在 HTML 页面中添加所有文本，然后将它隐藏在你不希望它显示的屏幕宽度上。例如：


    <div>
    [text that will be shown for screens less or equal to 960px in width]
        <div class="smallScreen">
        some new text only for lower resolution
        </div>
    [end of condition for small screens]

    [text that will be shown for other screens that are greater in width]
        <div class="largeScreen">
        some new text only for higher resolution
        </div>
    </div>

然后你可以添加 CSS：

    /* On smaller resolutions, hide the text for Large screens */
    @media only screen and (max-width: 960px) {
        .largeScreen {display: none;}
   }

   /* On larger resolutions, hide the text for Small screens */
    @media only screen and (min-width: 960px) {
        .smallScreen {display: none;}
   }

我希望这一切正常:)

于 2020-05-01T17:57:44.880 回答
1

我可能是错的，但我认为通过分辨率选择 css 需要 javascript 的一些帮助。

这是嵌入在 jquery 中的 js 外观的快速示例：

$(document).ready(function() {

  if ((screen.width>=1024) && (screen.height>=768)) {
   alert('Screen size: 1024x768 or larger');  
   $("link[rel=stylesheet]:not(:first)").attr({href : "detect1024.css"});
 }
  else  {
    alert('Screen size: less than 1024x768, 800x600 maybe?');
    $("link[rel=stylesheet]:not(:first)").attr({href : "detect800.css"});
  }
});

希望有帮助。

于 2011-11-28T10:27:10.313 回答
1

您可以添加jQuery功能以根据屏幕分辨率动态更改样式。 

if(screen.width==1600)
       { 
        jQuery('#hb-gotop').removeAttr("margin-left", "-0.9");
        jQuery('#hb-gotop').attr('style', 'margin-left: -0.7%');
       }
        else if(screen.width==1280)
       { 
        jQuery('#hb-gotop').removeAttr("margin-left", "-0.9");
        jQuery('#hb-gotop').attr('style', 'margin-left: -0.9%');
       }    
       else if(screen.width==1024)
       { 
        jQuery('#hb-gotop').removeAttr("margin-left","-0.9");
        jQuery('#hb-gotop').attr('style', 'margin-left: -1.1%');
       }
        else if(screen.width==800)
        { 
        jQuery('#hb-gotop').removeAttr("margin-left","-0.9");
        jQuery('#hb-gotop').attr('style', 'margin-left: -1.3%');
       }
于 2013-03-21T08:20:15.030 回答
1

Answere 的帮助来自：

如果屏幕分辨率小于 x 附加 css

您可以使用 @media 命令完全使用 CSS 3 完成此操作。

**@media (max-width:960px) { css... } //nothing with screen size bigger than 960px

@media (min-width:960px) { css... } //没有小于 960px 的屏幕尺寸**

Jason Whitted 提出了一个很好的观点，这只是 CSS 3，因此它不适用于旧版浏览器（但它应该适用于所有现代浏览器）。您也可以进行屏幕或设备编辑

@media screen { .nomobile { 显示：块；} } //台式机/笔记本电脑

@media 手持 { .nomobile { 显示：无；} } //移动设备 或者你可以假设移动设备的宽度会更小，然后继续。

于 2017-02-28T10:56:01.693 回答