Search the Community

Showing results for tags '@media'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML и CSS
    • Для начинающих
    • Препроцессоры, постпроцессоры и шаблонизаторы
    • Методологии
    • Фреймворки и библиотеки
  • JavaScript
    • Для начинающих
    • Фреймворки и библиотеки
    • Скрипты и плагины
  • Разработка сайтов
    • Для начинающих
    • Инструменты разработки, сборки и автоматизации
    • Аудит и анализ кода
    • Программное обеспечение разработчика
    • Веб-дизайн
    • Мобильные платформы
    • Open Source
  • Серверное программирование
    • Для начинающих
    • PHP
    • Платформы и языки программирования
    • Базы данных
    • Скрипты, готовые движки, CMS, конструкторы
  • Полезное
    • Библиотека полезных приемов и решений
    • Ресурсы
  • Сервер
    • Техническая поддержка
    • Веб-сервер
    • Базы данных
    • Хостинг
    • Домены
  • Интернет-маркетинг, SEO
    • Поисковая оптимизация
    • Поисковые системы
    • Продвижение и монетизация веб-сайта
    • Сервисы статистики и аналитики
    • Услуги и сервис
    • Покупка и продажа
  • Коммерческие услуги
    • Freelance
    • Работа
    • Услуги и сервис
  • Давайте поговорим о ...
    • Общий
    • Хобби, отдых и развлечение
    • Человек и общество
    • Флейм
  • Наш форум
    • Конкурсы
    • Работа форума

Calendars

  • События в Украине
  • События в России
  • События форума
  • События партнёров
  • Все события

Blogs

There are no results to display.

There are no results to display.

Marker Groups

  • Members
  • Front-end
  • Back-end
  • Education
  • Looking for job
  • Offering job

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Web site


ICQ


Jabber


Skype


From


Interests

Found 13 results

  1. Всем привет! Задание: При размерах экрана от 800px и больше - col1=30%,col2=30%,col3=30% от ширины экрана и рассположены в 3 колонки; При размерах экрана от 500px до 800px - col1=100%,col2=50%,col3=50% от ширины экрана и первый блок сверху, два остальных снизу вместе; При размерах экрана от 0 до 500px - col1=90%,col2=90%,col3=90% от ширины экрана и расположены друг под другом. Вопрос: как сделать, чтобы в колонках отображалось нужное значение в %-х в зависимости от размера экрана? unit.zip
  2. Неугомонный

    Вопрос по @media

    <style> .right { float: right; } @media only screen and (max-width: 600px) { .zzzz { display: none; } } </style> <div class="right zzzz"> // ... </div> Необходимо создавать класс zzzz для шаблона больше чем 600px если мне нечего будет вписать в него никаких параметров ?
  3. Неугомонный

    Вопрос по @media

    Всем привет, есть документация под нормы расширения экранов @media screen , где обозначено до скольки PX я могу скажем так воображать себе в голове под что я верстаю телефон/планшет/пк ?
  4. Недавно начал учиться верстке. Столкнулся с адаптацией, и тут возникла одна проблема: моя среда разработки как-будто не видит медиа-запросы. Написал примитивный код, чтобы проверить. У друзей код работает, у меня нет. Подскажите с чем это может быть связано. Прикрепляю скрины.
  5. Доброго времени суток, знатоки! Создаю сайт с адаптивным дизайном с использованием @media. Подключаю стили для разных разрешений экрана. Стили, в принципе, одни и те же, меняются лишь значение у width, height, font-size, margin и padding. Подключаю так: <link rel="stylesheet" type="text/css" href="styles/style.css" /> <link media="only screen and (max-width:1650px)" rel="stylesheet" href="styles/style_1650.css" /><link media="only screen and (max-width:1560px)" rel="stylesheet" href="styles/style_1550.css" /><link media="only screen and (max-width:1450px)" rel="stylesheet" href="styles/style_1450.css" /><link media="only screen and (max-width:1350px)" rel="stylesheet" href="styles/style_1350.css" /><link media="only screen and (max-width:1210px)" rel="stylesheet" href="styles/style_1210.css" /><link media="only screen and (max-width:1000px)" rel="stylesheet" href="styles/style_1000.css" /><link media="only screen and (max-width:850px)" rel="stylesheet" href="styles/style_800.css" />Возник вопрос, нужно ли в каждом файле стилей для нужного разрешения указывать все стили для страниц, хотя они указаны в главном style.css или нужно менять только те свойства, которые будут уникальными для данного разрешения экрана?Заранее благодарю за помощь)
  6. У меня есть подгружаемый шрифт, но подгружать я его хочу на определенном разрешении, я не хочу, чтобы пользователи мобильного интернета теряли в скорости загрузки сайта и даю им стандартный шрит, а для пользователей стационарных ПК я подгружаю шрифт, но валидатор ругается на подобное подключение, хотя все работает, помогите разобраться, как мне сделать грамотно все в этой ситуации. У меня в основной таблице стилей подключен другой шрифт, там нет ошибки, но при подключении именно в @media screen выдается ошибка.
  7. Требуется что бы в зависимости от разного разрешения экрана менялись элементы на сайте, при этом я пытался привязать несколько CSS к одному HTML: <!DOCTYPE html> <html><head><title>Black Hog Games</title><meta charset="utf-8"> <link type="text/css" rel="StyleSheet" href="/_st/my.css" /><link type="text/css" rel="StyleSheet" href="/Black_Hog_Games/styles/CSS_1024x600.css" /><link type="text/css" rel="StyleSheet" href="/Black_Hog_Games/styles/CSS_1024x768.css" /> Документы привязались и все шло хорошо, пока не потребовалось межу ними переключаться: При проверке возникала путаница - включался не тот CSS, а самый первый - CSS_1024x600.css, а иногда подключеные CSS вообще отключались и работал только самый стандартный -/_st/my.css. Как сделать что бы в зависимости от размера экрана включался нужный CSS? Вот код CSS: @media only screen and (max-width: 1024px), and (max-height: 600px){ #Menu{ display: block; width: 100%; height: 50px; position: absolute; top: 27%; left: 0%; z-index:2;} #Home { display: block; width: 130px; height: 40px; float:left; padding-top: 2px; padding-left: 40px; }} @media only screen and (max-width: 1024px), and (max-height: 768px){ #Menu{ display: block; width: 100%; height: 50px; position: absolute; top: 20%; left: 0%; z-index:2;} #Home { display: block; width: 125px; height: 35px; float:left; padding-top: 2px; padding-left: 35px; }} В добавок ко всему он вместо @media only screen and (max-width: 1024px), and (max-height: 600px){ отображает @media only screen and (max-width: 1024px), not all
  8. Ребята - при верстке появилась такая проблема: У меня не работает @Media запросы - они просто перечеркиваются! Но если их вручную включить а ненужные выключить - все выглядит отлично! (Картинка сжимается и в общем все работает) Так как же мне сделать что-бы оно само отключало обычный тег и включало @Media при условии (max-width: 1000px)??? Вот код: HTML: <div id="Menu"><a href="http://blackhoggames.clan.su/" ><img src="/Black_Hog_Games/images/BottonHome.png" id="Home" class="Botton"></a> </div> </Menu> CSS: @media only screen and (max-width: 1000px){#Home { display: block; width: 130px; height: 30px; float:left; padding-top: 2px; padding-left: 10px; }} #Home { display: block; width: 160px; height: 45px; float:left; padding-top: 2px; padding-left: 10px;}
  9. Приветствую всех участников HTML - форума ! Поясню вопрос более подробно, в стиле задачи из учебника Дано: Адаптивная (Responsive) страница, в конце таблицы style.css прописаны @media queries под разные разрешения. Пример: ***Main Style*** h1 { padding-right: 20px; } p { margin-left: 10px; } @media queries (max-width: 991px) { h1 { padding-right: 10px; } p { margin-left: 5px; } } @media queries (max-width: 640px) { p { margin-left: 3px; } } Необходимо что-бы при просмотре с устройства попадающего под параметры последнего @media queries (max-width: 640px) у элемента h1 был задан атрибут padding-right со значением 10px как в предыдущем @media queries (max-width: 991px). Необходимо ли дублировать для этого стиль из одного @media queries в другой ? Я знаю что браузер читает и применяет стили последовательно, также есть разные приоритеты. Но как обстоят дела при открытии странички с других устройств ? Сначала браузер применяет Main Styles а потом сразу применяет нужный ему @media queries или все также последовательно ? Проще говоря кочуют ли стили из "верхних"(больших разрешений) @media queries в нижние(маленькие разрешения) или необходимо их дублировать ?
  10. Здравствуйте. При создании сайта возникла проблема, в мобильных браузерах (смартфонов и планшетов) он прижимается к левому краю. Было принято решение дополнить шаблон с помощью атрибута @media, однако, как оказалось, современные браузеры на мобильных устройствах не считывают тип "handheld", считая, что для них предназначен обычный тип "screen". Задать необходимые параметры через значение @media screen and (max-device-width:) также не получается из-за того, что современные мобильные устройства имеют разрешение равное стационарным мониторам. Подскажите, как можно решить данную проблему?
  11. Добрый день форумчане. Совсем недавно - вчера, начал работать с медиа-запросами и у меня возникло несколько вопросов: Записывать медиа-запросы стоит вначале css документа, в конце или непосредственно под самим селектором? Нужно ли указывать ширину блока (или задавать любое значение селектору) используя @media? Ведь если расположить @media вначале css документа и при этом задать значение нужному селектору, без !important медиа-запрос работать не будет, т.к далее в css документе уже указано значение селектора. Что я имею ввиду: @media screen and (max-width:640px){.wrapper{width:600px}}.wrapper{width: 800px;}/*———————————————————————————-если в строке @media не применить значение .wrapper{width: 600px !important;}, оно работать не будет, т.к. ниже уже указана другая ширина блока.———————————————————————————-*/Можете поделиться секретами, кто и как делает, и как следует делать?
  12. Добрый день. При вёрстке шаблона столкнулся с такой проблемой: используя медиа-запросы без указания !important к нужному селектору, медиа-запросы не работают. Например: @media screen and (max-width: 640px){ .wrapper{ width: 600px !important; }}Если удалить !important ширина блока останется одинаковой, для любого разрешения экрана.
  13. Здравствуйте! Есть вот такая конструкция: <link rel='stylesheet' media='(min-width: 1281px) and (max-width: 1366px)' href='css/1366x768.css' /> <link rel='stylesheet' media='((min-width: 1025px) and (max-width: 1280px)) and ((min-height: 874) and (max-height: 900))' href='css/1280x1024.css' /> Но на практике она не работает... Хочу с её помощью подключать стилевой файл, если ширина окна будет колебаться от 1025 до 1280, а высота от 874 до 900 . Высота страницы задана в процентах, но высота блока с контентом - 874px. При увеличении ширины экрана (более 1280px) должен подключатся другой стилевой файл. Но почему-то этого не происходит. Даже при ширине в 1400 подключен файл 1280x1024.css. Пробовал менять min-height и max-height во всех мыслимых и немыслимых соотношениях... Подскажите, пожалуйста. что не так. Если у вас есть какие-то другие решения проблемы - буду очень рад.