Jump to content

Search the Community

Showing results for tags 'media'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Development
    • HTML Coding
    • JavaScript
    • PHP
    • CMS
    • Database
    • Web Server
    • Web-site Development
    • Internet Marketing, SEO
  • Library
    • Tricks and solutions
    • Books
  • Commercial services
    • Freelance
    • Job
    • Goods and Services
  • Our Forum
    • Flame
    • Contests
    • Feedback and Ideas

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


Telegram


Signal


Viber


Skype


From


Interests

Found 7 results

  1. Подскажите, пожалуйста, что можно прописать, чтобы при уменьшении разрешения экрана колонки справа смещались вниз? Весь код в песочнице https://jsfiddle.net/fzbkeLyt/ Пробовала: Но не сработало. @media (max-width: 1200px) { .container { max-width: 970px; } } @media (max-width: 992px) { .container { max-width: 750px; } } @media (max-width: 767px) { .container { max-width: none; } }
  2. В общем почти сделал я такой сайт на вордпресс на monstroid2, и когда принялся проверять с помощью инструмента Screenfly на сервисе quirktools.com вёрстку на всех экранах выяснилось, что 15" и 19" вообще не обращают внимание на установки. Использовал power builder в котором можно выставлять margin и bottom по 4 категориям, Desctop, laptop, tablet, phone. На два последних я вообще сделал отдельные упрощённые версии сайта. Десктоп показывается безукоризненно(широкие экраны), лаптоп(квадратные как у меня) тоже всё настроено как надо. Но вот 15 и 19 дюймов почему то игнорируют всё. Вставлял через siteOrigin Custom CSS свои @media правила, но опять же, на них реагирует всё кроме этих двух разрешений. Извиняюсь за то, что плохо объясняю. Но как могу, Я пока мало что понимаю в вёрстке) На снимке поехавший по одной оси текст. Не получается вернуть его в нужное положение на этих разрешениях.
  3. Недавно начал учиться верстке. Столкнулся с адаптацией, и тут возникла одна проблема: моя среда разработки как-будто не видит медиа-запросы. Написал примитивный код, чтобы проверить. У друзей код работает, у меня нет. Подскажите с чем это может быть связано. Прикрепляю скрины.
  4. <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Recipes</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link href="css/style.css" rel="stylesheet"></head><body> <div class="image"></div> <div class="image"></div> <div class="image"></div> <div class="image"></div></body></html>.image { display: inline-block; height: 100px; width: 24%; border: 1px solid black;}@media screen and (max-width: 640px){ .image { width: 49%; }}https://yadi.sk/d/l4naCM-4q4suC- файлы Простой пример. Блоки размещаются в одну линию, а при ширине экрана 640 и меньше их ширина становится 49%, т.е. в один ряд размещается два блока. Проблема : в firefox (и только в нем) блоки принимают ширину 49% уже при экране 768px. Почему?
  5. Всех приветствую. Пытаюсь разобраться с подходом mobility first и наткнулся на интересный пример (далее «демо»). Также ознакомился с видео от Виталия Фридмана «Responsive Web-дизайн: Трюки и уловки», в которой он упоминает, что должно использоваться минимум http запросов для загрузки страницы. В коде демо-страницы стили для мобильных устройств и десктопных браузеров разделены и загружаются через link с указанием media параметров: <link rel="stylesheet" type="text/css" href="style.css" media="screen, handheld" /><link rel="stylesheet" type="text/css" href="enhanced.css" media="screen and (min-width: 40.5em)" /><!--[if (lt IE 9)&(!IEMobile)]> <link rel="stylesheet" type="text/css" href="enhanced.css" /><![endif]--> Однако, согласно тестам, браузеры игнорируют параметр media при загрузке стилевых таблиц. Тогда, чем же подход демо хорош? В чем его преимущества, если получится на один запрос больше? Далее, не совсем понятно, причина использования значения 40.5em. Почему используется относительная величина, если первоначальный размер шрифта в браузере может быть абсолютно любым? Также в демонстрационной версии не обнаружил подключения поддержки html5 тегов для старых браузеров (html5shiv) или аналог. Полифилы в modernzr тоже не подключены. Как тогда решена проблема поддержки? Плохое демо? UPDATE: Кажется, с последним вопросом разобрался. Используется подход «HTML 4 - для стилизации, HTML5 - для значения/семантики»
  6. Добрый день форумчане. Совсем недавно - вчера, начал работать с медиа-запросами и у меня возникло несколько вопросов: Записывать медиа-запросы стоит вначале css документа, в конце или непосредственно под самим селектором? Нужно ли указывать ширину блока (или задавать любое значение селектору) используя @media? Ведь если расположить @media вначале css документа и при этом задать значение нужному селектору, без !important медиа-запрос работать не будет, т.к далее в css документе уже указано значение селектора. Что я имею ввиду: @media screen and (max-width:640px){.wrapper{width:600px}}.wrapper{width: 800px;}/*———————————————————————————-если в строке @media не применить значение .wrapper{width: 600px !important;}, оно работать не будет, т.к. ниже уже указана другая ширина блока.———————————————————————————-*/Можете поделиться секретами, кто и как делает, и как следует делать?
  7. Добрый день. При вёрстке шаблона столкнулся с такой проблемой: используя медиа-запросы без указания !important к нужному селектору, медиа-запросы не работают. Например: @media screen and (max-width: 640px){ .wrapper{ width: 600px !important; }}Если удалить !important ширина блока останется одинаковой, для любого разрешения экрана.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy