CSS Media Query Tricks - PullRequest
Новая
       7

CSS Media Query Tricks

0 голосов
/ 22 марта 2011

Я пишу сайт, используя медиа-запросы для обработки мобильной версии.Возможно ли, чтобы основной файл CSS вывел это 

<div class="classname">
  Item 1<br />
  Item 2<br />
  Item 3<br />
  etc
</div>

И затем в файле телефона CSS вывел следующее: 

<div class="classname">
  Item 1&nbsp;&nbsp;
  Item 2&nbsp;&nbsp;
  Item 3&nbsp;&nbsp;
  etc
</div>

Также возможно скрыть текст с медиа-запросами

Ответы [ 3 ]

5 голосов
/ 22 марта 2011

Не совсем, нет. Но у вас может быть ul с li s, которые либо display: block (для первого примера), либо display: inline (для второго). 

<ul class="classname">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
 </ul>

 case 1:
 ul.classname li { display: block }

 case 2:
 ul.classname li { display: inline; padding-right: 24px }
1 голос
/ 22 марта 2011

Способ, которым вы пишете, невозможен: CSS не переписывает ваш HTML, он просто меняет презентационный аспект документа. Лучший способ - написать «семантический» HTML, то есть HTML, который содержит структуру вашего документа, но не макет, а затем использовать CSS, чтобы определить, как он будет размещен.

В вашем примере вы, вероятно, хотите, чтобы div содержал список элементов, поэтому логично было бы использовать <ul> вместо <div> и <li> вместо отдельного текста. элементы, например: 

<ul class="classname">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

С такой разметкой вы можете использовать CSS для стилизации списка в любом случае. Для настольного браузера вы, вероятно, хотите отобразить элементы по вертикали: 

ul.classname {
    /* First, override browser defaults: */
    list-style: none;
    padding: 0;
    margin: 0;
    text-indent: 0;
}

ul.li {
    display: block;
    padding: 0;
    margin: 0;
    text-indent: 0;
}

В мобильном браузере вы можете разместить их рядом друг с другом и добавить интервал между ними: 

ul.li {
    display: inline;
    margin-right: 2em;
}

Чтобы полностью скрыть элемент, используйте стандартные методы CSS, то есть display: none.

1 голос
/ 22 марта 2011

Вы можете просто установить br {display:none} в своей таблице стилей iphone, а также добавить информацию, используя ::after, но я не уверен, что вы можете поместить неразрывные пробелы в content часть вашего ::afterзаявление.

Кроме того, если вы скрываете тег br, у вас нет возможности добавить что-либо после.

Я бы порекомендовал сначала перейти к семантическому не-br html, чтосделает все намного проще.

...