Запитання з тегом «responsive-design»

На даний момент я маю щось на зразок: <div class="row"> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> </div> Тепер припускаючи, що це contentбули коробки різної висоти, з однаковою шириною - як я міг зберегти той самий «макет на основі …

88 html  css  twitter-bootstrap  responsive-design  bootstrap-4 

З Bootstrap 3 більше немає окремих файлів для адаптивних та стандартних таблиць стилів. Тож як я можу легко видалити адаптивні функції?

85 twitter-bootstrap  responsive-design  media-queries  twitter-bootstrap-3 

Я завантажив приклад Twitter Bootstrap і створив з ним простий проект рейок. Я скопіював css, де це було потрібно, і він відображається нормально. Я також скопіював js, і все на моєму робочому столі чудово працює: він реорганізує сторінку, коли я зміню розмір свого браузера. Використовуючи деякі «інструменти тестування адаптивного дизайну» …

84 twitter-bootstrap  responsive-design 

За допомогою медіа-запитів CSS ви можете max-device-widthнацілювати ширину пристрою (наприклад, iPhone або Android) та / або a, max-widthяка націлена на ширину сторінки. Якщо ви використовуєте max-device-width, коли ви змінюєте розмір вікна браузера на робочому столі, CSS не змінюється, оскільки ваш робочий стіл не змінює розмір. Якщо ви використовуєте max-width, коли …

82 css  responsive-design  media-queries 

Було б непогано обернути стилі css для різної роздільної здатності в деяких класах css, використовуючи менше. Я хотів би зробити щось на зразок: footer { width: 100%; } .tablet { footer { width: 768px; } } .desktop { footer { width: 940px; } } Наприкінці повинно вийти щось подібне: footer …

82 css  responsive-design  less  media-queries 

Я намагався побачити, яке srcsetзображення використовує мій браузер за допомогою інструментів розробника браузерів, але окрім використання вкладки мережі, щоб побачити, яке зображення воно отримує, я не можу сказати. Як правило, використання мережевої вкладки було б нормальним, але іноді я помічав, що вона отримує 2 версії зображень різного розміру, це траплялося …

81 html  css  responsive-design  developer-tools  srcset 

Останнім часом я розробляв сайти, які є більш чуйними, і я часто використовував медіа-запити CSS. Я помітив одну закономірність: порядок визначення медіа-запитів насправді має значення. Я тестував його не в кожному окремому браузері, а лише в Chrome. Чи є пояснення цій поведінці? Іноді це засмучує, коли ваш сайт працює не …

80 css  media-queries  responsive-design 

Я працюю на сайті за допомогою Bootstrap 3.1.0. Ви помітите, коли модальне вікно відкриється, смужка прокрутки браузера просто зникає на частку секунди, а потім повертається. Це робить те саме, коли ви закриваєте його. Як я можу зробити так, щоб він просто відкривався і закривався без взаємодії з смугою прокрутки браузера. …

78 html  twitter-bootstrap  responsive-design  twitter-bootstrap-3 

Я намагаюся поміняти divмісця розташування двох s на адаптивний дизайн (сайт виглядає по-різному залежно від ширини браузера / добре для мобільних пристроїв). Зараз у мене щось подібне: <div id="first_div"></div> <div id="second_div"></div> Але чи можна було б поміняти місця розташування, щоб це здавалося second_divпершим, лише за допомогою CSS? HTML залишається незмінним. …

78 css  responsive-design 

Як зробити iframe чуйним, не припускаючи співвідношення сторін? Наприклад, вміст може мати будь-яку ширину або висоту, що невідомо перед рендерінгом. Зверніть увагу, ви можете використовувати Javascript. Приклад: <div id="iframe-container"> <iframe/> </div> Розмістіть його iframe-containerтак, щоб вміст його ледь помістився всередині без зайвого простору, іншими словами, є достатньо місця для вмісту, …

14 javascript  html  css  iframe  responsive-design 

У мене виникають реальні проблеми, намагаючись дозволити вміст бічної панелі / навігації (за допомогою Bootstrap) показувати (бути розширеним) за замовчуванням на робочому столі та закрити за замовчуванням на мобільному телефоні та мати значок, який відображається лише на мобільному пристрої. Я не можу зробити так, щоб це спрацювало. <nav class="menu menu-open" …

9 javascript  html  css  bootstrap-4  responsive-design