Вопросы с тегом «responsive-design»

Я тестирую панель навигации Bootstrap, и у меня есть демонстрационный веб-сайт. Когда я изменяю размер браузера на рабочем столе, все работает нормально, включая панель навигации, которая становится сворачиваемым меню с небольшим значком вверху, который я могу щелкнуть, чтобы увидеть больше кнопок меню. Но когда я попробовал это в мобильном браузере …

139 twitter-bootstrap  user-interface  twitter-bootstrap-3  responsive-design  bootstrap-4 

У меня есть следующий код, который устанавливает контейнер, высота которого изменяется в зависимости от ширины при изменении размера браузера (для сохранения квадратного соотношения сторон). HTML <div class="responsive-container"> <div class="dummy"></div> <div class="img-container"> <IMG HERE> </div> </div> CSS .responsive-container { position: relative; width: 100%; border: 1px solid black; } .dummy { padding-top: …

135 html  css  responsive-design  vertical-alignment 

IPhone 5 имеет более длинный экран, и он не улавливает мобильный вид моего сайта. Каковы новые адаптивные дизайнерские запросы для iPhone 5 и можно ли их комбинировать с существующими запросами iPhone? Мой текущий медиа-запрос таков: @media only screen and (max-device-width: 480px) {}

132 iphone  css  responsive-design  media-queries  iphone-5 

Мне нужно создать отзывчивую страницу с помощью начальной загрузки, разместив div в центре страницы, как в приведенном ниже макете.

132 css  twitter-bootstrap  responsive-design 

У меня есть видео с YouTube, встроенное на наш веб-сайт, и когда я уменьшаю экран до размеров планшета или телефона, он перестает уменьшаться примерно до 560 пикселей в ширину. Это стандарт для видео на YouTube или я могу добавить что-нибудь в код, чтобы уменьшить размер?

125 youtube  responsive-design  embed 

У меня есть сайт, который нужно собрать, с фиксированным соотношением сторон примерно 16:9альбомного, как видео. Я хочу, чтобы он был центрирован и расширен, чтобы заполнить доступную ширину и доступную высоту, но никогда не увеличиваться с обеих сторон. Например: На высокой и тонкой странице содержимое будет растягиваться на всю ширину при …

122 html  css  responsive-design  aspect-ratio 

У меня есть веб-сайт, который должен адаптироваться для мобильных телефонов. Я создал его на своем рабочем столе. Когда я настраиваю окна браузера, он отлично работает для мобильного телефона, но когда я проверяю его на своем реальном мобильном телефоне: Samsung Galaxy S2 он не реагирует на мобильный вид. Что могло быть …

117 mobile  web  responsive-design 

Цель состоит в том, чтобы <svg>элемент расширился до размера его родительского контейнера, в данном случае a <div>, независимо от того, насколько большим или маленьким может быть этот контейнер. Код: <style> svg, #container{ height: 100%; width: 100%; } </style> <div id="container"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" > <rect x="0" y="0" width="100" height="100" /> …

112 css  html  svg  responsive-design 

Мне нужно добавить в свое веб-приложение функции адаптивного дизайна с помощью Twitter Bootstrap. Мне просто нужно отзывчивое поведение, меня не интересуют типографика, компоненты или любые другие вещи, включенные в Bootstrap. Я получил настроенную версию Bootstrap, просто выбрав сетку. Однако, когда я добавляю сгенерированный CSS в свое приложение, все мои стили …

109 html  css  twitter-bootstrap  responsive-design 

Учитывая, что Twitter Bootstrap разработан, чтобы быть отзывчивым / удобным для устройств, почему он не использует относительные размеры шрифтов?

104 twitter-bootstrap  mobile  fonts  responsive-design  font-size 

Это может показаться глупым вопросом. Если я использую этот фрагмент CSS для обычных дисплеев (где box-bg.png200 на 200 пикселей); .box{ background:url('images/box-bg.png') no-repeat top left; width:200px; height:200px } и если я использую медиа-запрос, подобный этому, для нацеливания на дисплеи сетчатки (с изображением @ 2x, являющимся версией с высоким разрешением); @media (-webkit-min-device-pixel-ratio: …

102 css  responsive-design  media-queries 

Я пытаюсь создать форму, как на изображении ниже, со скошенным краем только с одной стороны (например, с нижней стороны), в то время как другие края остаются прямыми. Я пробовал использовать метод границы (код приведен ниже), но размеры моей формы динамические, поэтому я не могу использовать этот метод. .shape { position: …

93 html  css  responsive-design  css-shapes 

У меня есть такой код: <footer class="row"> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 1</li> <li>Text 2</li> <li>Text 3</li> </ul> </nav> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 4</li> <li>Text 5</li> <li>Text 6</li> </ul> </nav> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 7</li> <li>Text 8</li> <li>Text 9</li> </ul> </nav> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 10</li> <li>Text …

92 html  css  twitter-bootstrap  twitter-bootstrap-3  responsive-design 

EDITED: Может быть, мне следует спросить, какой селектор устанавливает боковые отступы, когда экран уменьшается до ширины ниже 480 пикселей? Некоторое время я просматривал bootstrap-responseiveness.css, чтобы найти это, но, похоже, на это ничего не влияет. Оригинал Я в основном хочу удалить любые отступы или поля по умолчанию, установленные для скорости отклика …

89 css  twitter-bootstrap  responsive-design  media-queries 

Как точно распределить медиа-запросы, чтобы избежать дублирования? Например, если мы рассмотрим код: @media (max-width: 20em) { /* for narrow viewport */ } @media (min-width: 20em) and (max-width: 45em) { /* slightly wider viewport */ } @media (min-width: 45em) { /* everything else */ } Что будет происходить во всех поддерживающих …

89 css  responsive-design  media-queries