BOMS
-
Posts
6 -
Joined
-
Last visited
BOMS's Achievements
Explorer (1/14)
0
Reputation
-
Чем тестировать верстку под разные разрешения/девайсы без их наличия?
BOMS replied to BOMS's question in HTML Coding
Да я не пропускал, просто на форум почему то так вставилось. Поверьте кстати - баг форума. -
Чем тестировать верстку под разные разрешения/девайсы без их наличия?
BOMS posted a question in HTML Coding
Столкнулся с проблемой тестирования вёрстки под разные мобильные устройства. То что есть например в инструментах разработчика Google Chrome работает не совсем так как надо. Возьмём например код: <html> <head> <meta charset="utf-8"> <title>test</title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> </body> </html> и CSS стиль для него: @media screen and (max-width: 1100px) { body{ background:rgba(43,167,,1.00);} } @media screen and (max-width: 640px){ body { background:rgba(213,,3,1.00);} } Цвет фона при ширине меньшей 640px меняется только при ручном изменении размера окна браузера Chrome, Firefox, IE... В режиме эмуляции устройств Google Chrome (Ctrl + Shift + M) при установленной ширине девайса менее 640px фон всё равно остаётся зелёный. Дополнения для chrome "Mobile Browser Emulator" и "Ripple" меняют цвета фона при ширине экрана меньше 640px на красный. На сайте http://quirktools.com/screenfly/ при разрешении ecnhqjcnd менее 640px - фон меняется на красный. На устройствах Google Nexus 7, Samsung Galaxy Tab3, Iphone 4 в портретном режиме экран всё равно отображается зелёным. Подскажите, в чём может быть проблема и на каком софте точнее всего тестировать свою вёрстку? -
Мне посоветовали вот такой вариант описания backgoruind: В принципе он самый близкий к тому ,который я хочу, но опять же - происходит сдвиг фона при изменении размеров окна браузера. А хотелось бы чтобы делалась обрезка (crop) заднего фона. Я вот думаю 1. Может этот background поместить в DIV? а уже этот DIV спозиционировать как я хочу 2. Разместить это bacground s DIV слой, но в качестве обычной картинки и спозиционировать её по-моему. Но вот не знаю, какие способы позиционирования гибче? то есть предоставляют больше возможностей определения положения элемента относительно экрана?
-
Это да. Дело в том, что у меня большой размер картинки бэкграунда. Сам контент размещается строго посередине бекгрануда. Я хочу чтобы, чтобы на больших мониторах происходило просто увеличение видимой области бекграунда. А самое содержимое сайта (которое расположено по центру) - и оставалось бы в центре. То есть мне нужно, чтобы при использовании свойства background-size: cover - самая картинка центровалась бы
-
Здравствуйте, изучил все возможные способы позиционирования background с помощью CSS. Но никак не пойму, возможно ли сделать такое. Есть картинка фона (background) размером 2560 на 1440 Хочу чтобы центр этого фонового изображения всегда был по центру экрана, но чтобы при этом при изменении ширины экрана - фоновая кртинка не изменяла своих размеров. Образно говоря, 1. Сначала применяю к фону свойство background-size: cover; фоновое изображение при этом фиксировано, не изменяет своих размеров при изменении ширины экрана, просто обрезается - так как я хочу, но хотелось бы ещё чтобы центр картинки был по центру экрана. 2. Применяю свойство background-position: center center; Фоновое изображение встаёт по середине экрана, но теперь его размеры сжимаются и он сдвигается при изменении ширины окна. Мне же надо, чтобы изображение было по центру не сжималось, а просто обрезалось как при применении просто свойства background-size:cover и центр изображения был по центру экрана.
-
Здравствуйте. Есть одна нестандартная проблема. Хочется узнать возможно ли вообще её решение. В прикреплённом скриншоте в принципе её всё описание. Хотелось бы чтобы при изменении ширины экрана верхняя часть дуги всегда проходила между пунктами меню "вопрос-ответ". Так же хотелось бы граница фона (на скриншоте показано где она проходит) проходила бы так же чуть ниже середины прямоугольников центрального меню. То есть хотелось бы чтобы при изменении ширины страницы - все элементы меняли свои размеры и расстояния между ними строго прямо-пропорционально в процентном соотношении. Образно говоря, чтобы это было как простое масштабируемое изображение, но на изображении не сделаешь активных элементов, например как подсвечивающееся меню или кнопка поднятия страницы вверх "^" в футере. Возможно ли вообще такое? У меня пока что только следующие соображения: 1. Сделать это обычной картинкой с тегами area? которые позволяли бы при наведении на пункты меню подсвечивать их какими либо эфектами 2. Переносить макет на flash, но тогда на iOs девайсах сайт отображаться не будет. 3. Делать вёрстку на CSS (если такая вообще возможна), которая масштабировала бы и сдвигала верхнее и центральное меню так, чтобы макет строго соответствовал исходному на скриншоте.