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

时间:2011-11-28 10:20:00

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

我理解如何通过媒体查询更改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>

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

7 个答案:

答案 0 :(得分:7)

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

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

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

答案 1 :(得分:4)

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

答案 2 :(得分: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时可见。

答案 3 :(得分:1)

我可能错了,但我认为按分辨率选择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"});
  }
});

希望有所帮助。

答案 4 :(得分: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%');
       }

答案 5 :(得分:1)

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

我希望这样可以解决:)

答案 6 :(得分:0)

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; } } //移动设备 或者你可以假设移动设备的宽度较小,然后继续使用。