Как написать разные HTML для разных размеров экрана - PullRequest
Новая
       53

Как написать разные HTML для разных размеров экрана

8 голосов
/ 28 ноября 2011

Я понял, как изменить 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>

Какое условие мне нужно написать, чтобы понять это правильно?

Ответы [ 6 ]

7 голосов
/ 28 ноября 2011

Насколько я знаю, вы не можете выполнять медиа-запросы внутри HTML-страниц. Вам нужно сделать это изнутри вашего CSS.

Но если вы хотите показывать какой-то специальный текст только тогда, когда он ниже определенного разрешения, почему бы не сделать его видимым только тогда, когда разрешение ниже 960 пикселей?

Создание адаптивных дизайнов очень отличается от обычного дизайна, потому что вы должны думать намного больше (что является надуманным)

4 голосов
/ 28 ноября 2011

вы можете проверить это, используя экранный объект javascript: 

screen.width

или вы можете сделать это с помощью css 

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

http://css -tricks.com / 6206-resolution-Specific-Styles Sheets / http://www.javascriptkit.com/howto/newtech3.shtml

3 голосов
/ 28 ноября 2011

Вам необходимо присвоить идентификатор (или класс, или любой другой способ поиска вашего элемента из CSS) для <div>, а затем вы можете задать определение медиазапроса следующим образом: 

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

Или для лучшей читаемости: сделайте его скрытым по умолчанию и видимым, если max-width: 960px.

1 голос
/ 21 марта 2013

Вы можете добавить функцию 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%');
       }
1 голос
/ 28 ноября 2011

Я могу ошибаться, но я думаю, что для выбора CSS по разрешению потребуется небольшая помощь из javascript.

Вот краткий пример того, как может выглядеть этот js, встроенный в jquery: 

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

Надеюсь, это поможет.

0 голосов
/ 28 февраля 2017

Ответ был полезен из:

если разрешение экрана меньше, чем x, добавьте css

Вы можете сделать это полностью с помощью CSS 3 с помощью команды @media. 

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

@ media (min-width: 960px) {css ...} // ничего с размером экрана меньше, чем 960px **

Джейсон Уитед делает хорошую мысль, это CSSТолько 3, поэтому он не будет работать со старыми браузерами (хотя он должен работать со всеми современными браузерами).Вы также можете редактировать экран или устройство

@ media screen {.nomobile {display: block;}} // десктопы / ноутбуки

@ media handheld {.nomobile {display: none;}} // мобильные устройства Или вы можете предположить, что мобильные устройства будут иметь меньшую ширину, и пойдем дальше.

...