Запитання з тегом «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" /> </svg> …

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.png200px на 200px); .box{ background:url('images/box-bg.png') no-repeat top left; width:200px; height:200px } і якщо я використовую медіа-запит, подібний до цього, для націлювання на сітківку (якщо зображення @ 2x є версією високої роздільної здатності); @media (-webkit-min-device-pixel-ratio: 2), …

102 css  responsive-design  media-queries 

У мене є такий код: <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 

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

92 html  css  responsive-design  css-shapes 

ВИДАЛЕНО: Може, я повинен запитати, який селектор встановлює бічні відступи, коли екран зменшується до ширини нижче 480 пікселів? Я деякий час переглядав bootstrap-responsiveness.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 */ } Що станеться з усіма підтримуючими …

88 css  responsive-design  media-queries