Запитання з тегом «media-queries»

Медіа-запити дозволяють умовно застосовувати стилі CSS на основі типів носіїв, таких як екран та друк, та умов медіа-функцій, таких як вікно перегляду та висота та ширина пристрою. Вони є частиною специфікації W3C CSS3.

3
CSS-медіа-запити: max-width АБО max-height
Коли ви пишете медіа-запит CSS, чи можна вказати кілька умов за допомогою логіки "АБО"? Я намагаюся зробити щось подібне: /* This doesn't work */ @media screen and (max-width: 995px OR max-height: 700px) { ... }
490 css  media-queries 
5
Яка різниця між "екраном" та "єдиним екраном" у медіа-запитах?
У чому різниця між запитами screenта only screenмедіа? <link media="screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" /> <link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" /> Чому нас вимагають використовувати only screen? Є чи screenсама по собі не дає достатньої інформації , яка надаватиметься тільки на екрані? Я бачив безліч чуйних …
487 css  media-queries 
15
Медіа-запити: як націлити на настільний ПК, планшет і мобільний телефон?
Я займався деякими дослідженнями медіа-запитів, і досі не дуже розумію, як орієнтуватися на пристрої певних розмірів. Я хочу мати змогу націлювати на робочий стіл, планшет та мобільний телефон. Я знаю, що будуть розбіжності, але було б непогано мати загальну систему, яка може використовуватись для націлювання на ці пристрої. Я знайшов …
11
Чи можуть медіа-запити змінювати розмір на основі елемента div, а не екрана?
Я хотів би використовувати медіа-запити для зміни розміру елементів залежно від розміру divелемента, в якому вони перебувають. Я не можу використовувати розмір екрана, оскільки divвін просто використовується як віджет на веб-сторінці, і його розмір може змінюватися. Оновлення Схоже, зараз над цим працює робота: https://github.com/ResponsiveImagesCG/cq-demos
317 css  media-queries 
12
Чи можна поставити правила CSS @media вбудованими?
Мені потрібно динамічно завантажувати банерні зображення в додаток HTML5, і я хотів би, щоб пара різних версій відповідала ширині екрана. Я не можу правильно визначити ширину екрана телефону, тому єдиний спосіб, коли я можу це зробити, - це додати фонові зображення div та використовувати @media для визначення ширини екрана та …
293 html  css  media-queries 
9
Що означає екран @media та (max-width: 1024px) у CSS?
Я знайшов цей фрагмент коду у файлі CSS, який я успадкував, але я не можу з цього мати ніякого сенсу: @media screen and (max-width: 1024px){ img.bg { left: 50%; margin-left: -512px; } } Зокрема, що відбувається на першому рядку?
245 css  media-queries 
8
Яка різниця між максимальною шириною пристрою та максимальною шириною для мобільного Інтернету?
Мені потрібно розробити кілька html-сторінок для iphone / android телефонів, але в чому різниця між max-device-widthі max-width? Мені потрібно використовувати різні css для різного розміру екрана. @media all and (max-device-width: 400px) @media all and (max-width: 400px) Яка різниця?
5
@Media min-width & max-width
У мене є така @mediaнастройка: HTML : <head> <meta name="viewport" content="width=device-width, user-scalable=no" /> </head> CSS : @media screen and (min-width: 769px) { /* STYLES HERE */ } @media screen and (min-device-width: 481px) and (max-device-width: 768px) { /* STYLES HERE */ } @media only screen and (max-device-width: 480px) { /* STYLES …
3
@ медіа-запит та зіткнення синтаксису бритви ASP.NET MVC
У мене великий сайт, який працює в ASP.NET MVC за допомогою двигуна подання Razor. У мене є базовий таблиця стилів, яка містить усі загальні стилі для всього сайту. Однак у мене є певні стилі сторінки, які є <head>на сторінці - зазвичай це один або два рядки. Мені особливо не подобається …
17
$ (window) .width () не збігається з медіа-запитом
Я використовую Twitter Bootstrap для проекту. Крім стилів завантаження за замовчуванням, я також додав свої власні //My styles @media (max-width: 767px) { //CSS here } Я також використовую jQuery, щоб змінити порядок певних елементів на сторінці, коли ширина вікна перегляду менше 767 пікселів. $(document).load($(window).bind("resize", checkPosition)); function checkPosition() { if($(window).width() < …
16
Чому мої медіа-запити CSS3 не працюють?
У styles.css я використовую медіа-запити, обидва з яких використовують варіант: /*--[ Normal CSS styles ]----------------------------------*/ @media only screen and (max-width: 767px) { /*--[ Mobile styles go here]---------------------------*/ } Під час зменшення вікна веб-сайти змінюють розмір, який я хочу використовувати в звичайному браузері (Safari, Firefox), проте мобільний макет взагалі не відображається …
11
Підтримка IE8 для CSS Media Query
Чи IE8 не підтримує наступний медіа-запит CSS: @import url("desktop.css") screen and (min-width: 768px); Якщо ні, то який альтернативний спосіб написання? Це ж чудово працює у Firefox. Якісь проблеми з кодом нижче? @import url("desktop.css") screen; @import url("ipad.css") only screen and (device-width:768px);
19
Проблеми друку CSS @media з кольором тла;
Я новачок у цій компанії, і ми маємо продукт, який використовує милі css. Я намагаюся зробити друку таблиці стилів для нашого застосування , але у мене виникають проблеми з background-colorв @media print. @media print { #header{display:none;} #adwrapper{display:none;} td { border-bottom: solid; border-right: solid; background-color: #c0c0c0; } } Все інше працює, …
176 css  media-queries 
10
3 точки точки перерви та медіа-запити для завантаження
У документації про запити засобів масової інформації Bootstrap 3 написано: Наступні медіа-запити ми використовуємо в наших файлах Менше, щоб створити ключові точки перерви в нашій системі сітки. Зайві невеликі пристрої (телефони, менше 768 пікселів): Немає медіа-запиту, оскільки це стандартний засіб у Bootstrap Невеликі пристрої (планшети, 768 пікселів і вище): @media …
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.