Question

我理解如何通过媒体查询更改CSS（例如media =“screen and（max-width：640px）”）

但是我想说我想写（仅举例）

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

为了做到这一点我需要写什么条件？

Answer 1

据我所知，您无法在HTML页面内进行媒体查询。你需要在你的CSS中做到这一点。

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

创建自适应设计与常规设计有很大不同，因为你必须考虑更多（这是haaard）

Answer 2

您可以使用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

Answer 3

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

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

或者为了更好的可读性：将其隐藏在默认值中并在max-width: 960px时可见。

Answer 4

我可能错了，但我认为按分辨率选择css需要javascript提供一些帮助。

以下是js看起来像jsery中嵌入的内容的快速示例：

$(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"});
  }
});

希望有所帮助。

Answer 5

您可以添加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%');
       }

Answer 6

我实际上正在经历相同的情况，发现如果要执行此操作，则可以真正将所有文本添加到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;}
   }

我希望这样可以解决：）

Answer 7

Answere的帮助来自：

if screen resolution is less than x append 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 {display：block; }} //桌面/笔记本电脑

@media handheld {.nomobile {display：none; } } //移动设备或者你可以假设移动设备的宽度较小，然后继续使用。

如何针对不同的屏幕尺寸编写不同的HTML

7 个答案: