Отключить CSS для отзывчивого дизайна

-2

У меня есть следующая настройка CSS на моем сайте. Я бы хотел, чтобы он был отключен, когда ширина браузера была более узкой, чем 900 пикселей, но чтобы оставаться включенной, когда ширина браузера больше 900. Любые предложения о том, как я могу это сделать?Отключить CSS для отзывчивого дизайна

Спасибо!

.image-slide-title { 
    display: block !important; 
    height: 100%; 
    width: 100%; 
    position: absolute; 
    top: 1; 
    z-index: 2000; 
    font-family: "open sans"; 
    font-size: 100%; 
    font-weight: 100; 
    margin-bottom: 100px; 
    line-height: 1.8; 
    color: #333 
}

источник

2013-10-03 G Weg

напишите медиа-запрос и просто напишите reset css в одно и то же для всех элементов. Не забудьте отметить эти важные, так как только тогда будет выполнено сброс в вашем случае –

Не то, чтобы я не хотел вам помогать, но это одна из первых вещей, которые вы видите, если вы проводите фундаментальные исследования на гибкой сети дизайн. Google - ваш друг, а также другие поисковые системы. – RaptorDotCpp

Спасибо, ребята. @RaptorDotCpp Lol, я пробовал искать, но я не нашел ничего, что мог бы понять. Фигурированный кто-то здесь был бы рад помочь с простым предложением. –

Не забудьте добавить тег HTML для небольших устройств:

HTML

нанесенными следующая мета в вашей голосовой странице

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

CSS

.image-slide-title { 
      display: block !important; 
      height: 100%; 
      width: 100%; 
      position: absolute; 
      top: 1; 
      z-index: 2000; 
      font-family: "open sans"; 
      font-size: 100%; 
      font-weight: 100; 
      margin-bottom: 100px; 
      line-height: 1.8; 
      color: #333 
     } 

    @media screen and (max-width: 900px) { 
      .image-slide-title { 
      /* do what you want here */ 
      display: none !important; 
      } 
     }

Честно говоря, если вы можете удалить важный тег, он будет гораздо более простым в управлении ответным силу по

источник

2013-10-03 17:40:53 Romain

Спасибо @Romain! Это сработало отлично. Очень ценю вашу помощь. –

Кроме того, если вы хотите создать отзывчивый дизайн для всех устройств, вы можете найти много онлайн-сайтов, которые помогут вам: http://www.responsinator.com/ Примечание: большинство веб-сайтов не являются эмуляторами, поэтому результат может быть в зависимости от устройства (ежевика IOS сосет) – Romain

Я считаю, что вы ищете медиа-запросы.

@media (max-width: 899px) { 
    .image-slide-title { 
     display: none !important; 
    } 
}

Не забудьте сделать это на HTML:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
     <meta name="viewport" content="width=device-width" />

источник

2013-10-03 17:37:25 Esteban

Моей рекомендация состоит в том, чтобы создать вторичную страницу Css для мобильного телефона ,

<link rel="stylesheet" media="screen and (min-width: 901px)" href="style.css" /> 
<link rel="stylesheet" media="screen and (max-width: 900px)" href="mobile-style.css" />

Тогда в этой таблице стилей есть настройки, характерные для этого.

источник

2013-10-03 17:44:35 Cam

Спасибо, Cam! Ценить это. –

Отключить CSS для отзывчивого дизайна

ответ

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