можно скрыть определенный символ в медиа-запросах?

Мне интересно, могу ли я просто скрыть 'pipe' (например: |) символов в моих медиа-запросах в определенном окне просмотра?можно скрыть определенный символ в медиа-запросах?

мне интересно, потому что у меня есть меню, которое использует их в качестве разделителей, но оказывает очень плохо на мобильных видовых, так бы ЛЮБОВЬ если бы я мог как-то просто скрыть их.

Я думаю, мне, возможно, придется использовать некоторый jQuery с моим определенным CSS в мобильном видовом экране?

Любые предложения?

Обновление 10:38: Спасибо за удивительные ответы; Я пробовал предлагать с добавлением класса в тег span, и теперь мои трубы не отображаются на экране, ниже - разметка в footer.php. У меня есть и соответствующая скрыть в среде Q.

<li class="f"><a href="#" class="scrolltime">EXPLORE</a> <span class="pipe"> | </span></li> 

<li class="f"><a href="#" class="scrolltime"> FOR</a><span class="pipe"> | </span></li> 

<li class="f"><a href="#" class="scrolltime">ENHANCED</a><span class="pipe"> | </span> </li> 

<li class="f"><a href="/iframe/buybutton.html" class="fancybox-iframe" style="color:#C6C699;">Iframe</a></li> 
</ul>

CSS3:

/* Smartphones (Landscape) ----------- */ 
@media only screen and (min-width: 320px) and (max-width: 480px) { 


#topvidarea { 
    margin-left: 24%; 
    margin-right: 20%; 
    margin-top: -265px; 
    max-width: 400px; 
} 

#topbgimg { display: none; } 

#topbtn, #topbtn2, #topbtn3 { 
    border: 0 solid #C6C699; 
    display: inline; 
    float: left; 
    font-family: Georgia; 
    margin-right: 5px; 
    text-align: center; 
    width: 122px; 
} 


#topvidarea { 
    margin-left: 24%; 
    margin-right: 20%; 
    margin-top: 15px; 
    max-width: 400px; 
} 

#footer a { 
    font-size: 8px; 
    margin: 0; 
    padding: 12px; 
    text-indent: 1px; 
} 

.f { 
    float: none; 
    margin-top: -2px; 
    padding-left: 0; 
} 

.pipe { display: none; } 

}

источник

2012-03-12 Fred Randall

Можете ли вы поделиться соответствующим кодом или, что еще лучше, сделать для него [скрипку] (http://jsfiddle.net/)? –

Коренная проблема заключается в том, что вы используете контент (символы трубы) для представления (украшения). Избежать этого является одной из главных причин использования CSS в первую очередь. Представьте себе человека с недостатками зрения, использующего ваш сайт. Как их screen reader должен произносить «|»? Если вы не уверены, скорее всего, он должен быть перемещен с уровня содержимого (HTML) на уровень представления (CSS). (На самом деле для чтения с экраном достаточно, чтобы избежать этого общей ловушки умное, но он по-прежнему является полезным умственным упражнением.)

Вы можете, как следует @ChrisN использовать border-right или -left, но другой вариант заключается в использовании селектора :after.Например, вместо этого:

<nav> 
    <ul> 
    <li>Foo</li> | 
    <li>Bar</li> | 
    <li>Baz</li> 
    </ul> 
</nav>

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

<nav> 
    <ul> 
    <li>Foo</li> 
    <li>Bar</li> 
    <li>Baz</li> 
    </ul> 
</nav>

И затем использовать селектор :after в презентации слоя (CSS), чтобы положить трубы между ними:

@media ... { 
    nav li:after { 
    content: "|"; 
    } 

    /* no "|" after the last one, though */ 
    nav li:last-child:after { 
    content: normal; 
    } 
}

Вы можете, конечно, использовать свойства padding, чтобы поместить нужное количество места вокруг «|» s.

Этот подход позволяет избежать взвешивания страницы с дополнительной разметкой, а также дает большую гибкость, чем, например, border-right, так как вы можете использовать изображение или несколько символов или символов или какую-то комбинацию, а не просто прямую линию.

источник

2012-03-12 14:38:57

Я думаю, что это приемлемый прецедент для 'content', хотя я очень сильно согласен с [что здесь указано] (http://stackoverflow.com/a/2435542/1134541). – chrisn

Я согласен, что 'content' не должен использоваться для, er .. content, но в этом случае« | » безусловно, является презентацией (о чем свидетельствует тот факт, что OP хочет скрыть это в некоторых представлениях). –

Лучше бы, вероятно, изменить трубы к border-right с (или border-left с) и добавить расстояние, чтобы они выглядели как трубы, или (не рекомендуется) оберните ваши символы трубы в <span> или тому подобное. Затем вы можете скрыть их по своему усмотрению.

Но, нет, вы не можете просто скрыть символы таким образом с помощью CSS.

источник

2012-03-12 14:29:24 chrisn

Спасибо, да, я просто подумал дать им класс просто спрятаться в окне просмотра, но

, создал разрыв строки, а теперь мои трубы на 10 пикселей ниже моего меню !!! –

Это потому, что 'p' является блочным элементом. Используйте 'span', поскольку он является встроенным, или измените свой css соответствующим образом. – chrisn

Я не думаю, что вы можете конкретно скрыть символы, такие как, но вы могли так что-то вроде (очень упрощенный пример ..)

<span class="noshow> | </span> Home <span class="noshow> | </span About

Затем в мультимедийном запросе целевой это

.noshow { display: none }

Это неряшливо, но оно работает.

источник

2012-03-12 14:31:25

можно скрыть определенный символ в медиа-запросах?

ответ

Смежные вопросы