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

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 对象来检查它：

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

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

我希望这一切顺利:)