如何为不同的屏幕尺寸编写不同的 HTML答案

【问题标题】：How to write different HTML for different screen sizes如何为不同的屏幕尺寸编写不同的 HTML
【发布时间】：2012-01-07 19:48:51
【问题描述】：

我了解如何通过媒体查询（例如 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>

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

【问题讨论】：

我建议使用 CSS 隐藏该元素，然后使用媒体查询（您已经在使用）以较低的分辨率显示它。你有什么理由不这样做吗？
这是否会根据 PC 或移动设备显示不同的内容？
主要目标是将移动设备与桌面设备分开。我只是想知道这是否可能以及这是否是传统的。我猜所有的答案都是最好用css来做

标签： html css mobile screen-resolution responsive-design

【解决方案1】：

据我所知，您不能在 HTML 页面中进行媒体查询。您需要在 CSS 中完成。

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

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

【讨论】：

我没有想到 display:none 选项 - 我认为应该可以工作

【解决方案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

【讨论】：

【解决方案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可见。

【讨论】：

它没有有是一个ID，它可以是任何允许OP定位元素的东西。我怀疑我会使用一个类，这样如果我愿意，我可以在一个页面上放置多个这些。
是的。它看起来如此具体，以至于我认为 ID 是最好的选择......但是是的......如果情况允许，一个类或只是一个标签层次结构也可以工作。

【解决方案4】：

我实际上正在经历同样的情况，发现如果你想这样做，你可以在 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;}
   }

希望一切顺利:)

【讨论】：

【解决方案5】：

我可能是错的，但我认为通过分辨率选择 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"});
  }
});

希望对您有所帮助。

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

回答很有帮助：

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 { 显示：块； } } //台式机/笔记本电脑

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

【讨论】：