如何为不同的屏幕大小编写不同的HTML

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

但假设我想写（举个例子）

[如果屏幕分辨率低于960像素]
一些新文本仅用于较低分辨率
[条件结束]

---

我需要编写什么样的条件才能使其正确？

根据我的经验，您不能在HTML页面中进行媒体查询。您需要从CSS中执行此操作

但是，如果您只想在低于某一分辨率时显示某些特殊文本，为什么不仅在分辨率低于960px时才使其可见

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

您需要将id（或类或从CSS中查找元素的任何其他方式）分配给

，然后您可以像这样设置媒体查询定义：

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

。。。
@媒体屏幕和屏幕（最小宽度：961px）{
div#mydiv{显示：无}
}

---

或者为了更好的可读性：如果

max width:960px

您可以使用javascript屏幕对象检查它，则默认情况下将其隐藏并可见：

screen.width 

或者你可以用css来实现

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

---

http://www.javascriptkit.com/howto/newtech3.shtml我可能错了，但我认为按分辨率选择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"});
  }
});

---

希望对您有所帮助。

您可以添加

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%');
       }

---

我们从以下方面得到了帮助：

您可以使用@media命令完全通过css3实现这一点

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

@媒体（最小宽度：960px）{css…}//屏幕大小小于960px的任何内容**

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

@媒体屏幕{.nomobile{display:block；}}//台式机/笔记本电脑

@手持媒体{.nomobile{display:none；}}//移动设备

---

或者你可以假设移动设备的宽度会更小，然后继续。我实际上经历了同样的情况，发现如果你想这样做，你可以在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隐藏该元素，然后使用媒体查询（您已经在使用）以较低的分辨率显示它。有什么理由不这样做吗？这是为了根据个人电脑还是移动设备显示不同的内容吗？主要目标是将移动设备与桌面设备分开。我只是想知道这是否可能，这是否是传统的。我猜所有的答案都表明，最好使用cssIt，它不必是一个ID，它可以是任何允许OP以元素为目标的东西。我怀疑我会使用一个类，这样如果我愿意，我可以在一个页面上放置多个。它看起来非常具体，我认为ID是最好的选择…但是是的…如果环境允许的话，一个类或者仅仅是一个标记层次结构也可以工作。我没有想到显示：无选项-我认为应该这样做

    <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>

    /* 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;}
   }