Почему браузер сам меняет css

Простые правила разметки

Когда разметка будет готова, к ней потребуется оформление. Если добавить в ваши коды немного вспомогательных стилей, это поможет вам писать CSS проще и быстрее.

Цель вижу, в себя верю! #

Чтобы аккуратно сверстать макет, ничего не потеряв по дороге, нужно или обладать хорошей зрительной памятью, или постоянно сверяться с макетом. Второе отнимает массу времени, и всё равно можно что-то упустить. Для решения проблемы можно просто подложить макет под страницу:

Код вставляется в элемент <head> .

Если у вас есть макеты для разных разрешений экрана, их можно менять с помощью медиавыражений:

Чтобы фоны и картинки на странице не загораживали макеты, можно добавить opacity для <body> :

Чтобы удобно управлять прозрачностью, можно установить Pixel Glass:

  1. Установите скрипт в папку с проектом:
  2. Добавьте в <head> подключение файлов скрипта:

После этого на странице появится вот такая панель:

Панель Pixel Glass

Она позволит управлять прозрачностью <body> или выключить её совсем, если она не нужна.

Внимание: если локальный сервер смотрит не в корень проекта, а в другую директорию (например, source ), при запуске сервера npm-пакеты окажутся снаружи этой директории, и будут недоступны. В этом случае pixel-glass нужно устанавливать в директорию, куда смотрит сервер, склонировав туда пакет с гитхаба:

И подключать скрипты и стили оттуда:

Таким образом макеты будут всё время перед глазами и вам не придётся тратить время на переключение в графический редактор и обратно. Особенно это удобно при работе на маленьком экране, когда не получается разместить рядом фотошоп и браузер.

При использовании этого способа в какой-то момент текст страницы наложится на текст макета, и получится нечитаемая каша. Чтобы отличить их друг от друга, можно CSS-ом раскрасить текст в яркие цвета (например, color: crimson ). Получится примерно вот такое:

Цветной текст

Сразу видно где страница не совпадает с макетом и что нужно подправить.

Всем выйти из сумрака! #

Раскладывая элементы по странице, очень удобно видеть где они начинаются и где заканчиваются. Самый простой способ добавить границы выглядит так:

Почему outline , а не border ? outline не влияет на блочную модель элемента и не меняет его размеры, как это делает border .

Чтобы добавить обводки сразу нескольким крупным блокам, можно использовать такой код:

В действии это выглядит примерно так:

See the Pen yaXGpa by yoksel (@yoksel) on CodePen.

Этот код тоже можно вставить в head или лучше положить его в файл с стилями, но можно сделать ещё удобнее: добавьте в браузер Stylish (плагин для кастомного CSS) и подключите этот код через него — тогда в любой момент вы сможете включить или выключить обводки не покидая страницу.

Также можно добавить ещё больше обводок или задать свои цвета (цвета удобно задавать названиями).

Почему браузер Chrome меняет размер границы и не устанавливает тот, который я запрашиваю?

Я пытаюсь понять, почему размер границы не совсем тот, который я устанавливаю с помощью моих правил CSS. Вот скрипка, а вот HTML-код:

Когда я проверяю элемент <p> , я вижу, что размер границы не совсем равен 3px , но равен 2.222 .

Picture of the Box Model when inspecting the p element

Любая подсказка, почему?

Изменить / обновить

Я использую Chrome Version 46.0.2490.80 (64-bit) на Mac OS X Yosemite. Это правда, что проблема возникает при проверке Chrome. Когда я использую Firefox ( Version 41.0.2 ), рамка правильно отображается с размером 3 . То же самое и с Safari ( Version 9.0 (10601.1.56.2) ). Он отображает размер 3 .

Итак, в чем «проблема» Chrome?

2 ответа

Это глупая ошибка, которая совсем не очевидна. Но я хочу опубликовать здесь правильный ответ / решение этой проблемы, чтобы сэкономить время для всех, кто может оказаться в такой же ситуации.

Проблема заключалась в уровне масштабирования в моем браузере Chrome. Это было на 90% (что было нелегко определить), и это заставило Chrome пересчитать размеры, используя масштабирование.

Когда я сбросил масштаб до 100%, тогда на модели окна инструментов разработчика отображалась граница с правильным размером.

Вся история была действительно запутанной. Потому что другие свойства были правильными. Только граница не была правильной.

Подгонка разрешения в браузере на мобилках

Cтолкнулся с проблемой отображения HTML5 игр, сделанных на GameMaker Studio, на мобильных устройствах (iOS и Android). Ремарка: с HTML/CSS и еже с ними почти не сталкивался, опыта никакого.

Для примера, игра в 960*640. Взял такое изображение:

введите сюда описание изображения

При запуске на телефоне вижу такую картину:

введите сюда описание изображения

На экран также выводится разрешение браузера, которое возвращает движок. Как видно, оно в три раза меньше реального разрешения. Естественно, первым делом подумал, что ошибка в движке. Проверил, что возвращает непосредственно браузер — значения были те же самые. Задал вопрос и ответ histrionis’а натолкнул на мысль, что viewport как-то может помочь, ибо неизвестно сколько времени пройдёт, пока разработчики движка исправят проблему (если исправят вообще).

Заглянул в index.html , генерируемый движком, там стоит строка

Как понял, именно из-за этого отключается масштабирование канваса с игрой.

Так как не знаком с этой темой, наугад потыкал разные значения, например

Однако к желаемому результату это не привело (но частичные улучшения бывали).

Есть ли какая-нибудь магия, которая приведёт к нормальной работе всего этого?

P.S. Если поможет:

Сам index.html можно глянуть здесь

Скомпилированный проект здесь (как понимаю, с локалки не работает)

P.P.S. По браузерам ориентируюсь на Chrome и Samsung Internet для Android и Safari с Chrome на iOS.

upd: При использовании, например, <meta name ="viewport" content="width=device-width" /> , я вижу всё изображение, но его вертикальное разрешение ниже, чем должно быть. Например, 960*480 (экран 1920*1080) в ландшафтном режиме. Конечно же, игра в этом случае выглядит ужасно (размытость, нечитаемые мелкие тексты и т.п). В этом же случае при повороте в портретный режим браузер выдаёт разрешение 960*1494. Тогда изображение выглядит отлично, но оно слишком мелкое — занимает чуть больше одной трети экрана (из-за того, что ориентации противоположные). Т.е. мне в первую очередь нужно, чтобы в ландшафтном режиме высота браузера не была меньше высоты канваса игры.

upd2: С помощью Vasiliy Rusin найдено решение, которое решило проблему на Android (при этом браузер должен запрашивать ПК версию сайта, а не мобильную). На iOS по-прежнему отображается в очень низком разрешении.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *