Совместимость браузера для css

Question

Я очень новичок в мире разработки пользовательского интерфейса. Сейчас я использую HTML и CSS для разработки макета. Я использую Google Chrome (потому что это очень хороший браузер, и с моей точки зрения это лучше всего там), чтобы отлаживать мой код, но я только что загрузил Firefox, чтобы посмотреть, как будет выглядеть мой проект (я думал в значительной степени ничего не изменится), только чтобы пошатнуться, когда я обнаружил, что мой дизайн выглядит ужасно, и все, что я пережил, несовместимо с Firefox.

Мне нужен кто-то, у кого есть опыт в этой области, чтобы рассказать мне, как правильно воспринимать такую ​​несовместимость (некоторые профессиональные методы) между браузерами и что мне теперь делать для моего текущего дизайна и будущего при разработке других сайтов?

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

Обновлены

Answer 1

Поскольку все браузеры разработаны в основном разными людьми, всегда есть возможность столкнуться с проблемами совместимости.

Там два шага я могу думать, когда речь идет о предотвращении такого рода проблемы:

1. Используйте CSS Reseter. Это означает, что таблица стилей содержит набор CSS для приведения всех элементов в одно и то же значение стартера (т. Е. Хром имеет прописку 30px в элементах списка, firefox имеет 35px, но css resetter сообщает, что оба из них имеют 30px padding). Пример). Для получения дополнительной информации о сбрасываниях CSS, посмотрите на этот вопрос: CSS reset - What exactly does it do?
2. Правильно установите префикс CSS. Браузеры реализуют свойства по-разному, поэтому пока -webkit-transition:0.2s; работал в ранней версии chrome, firefox имел свою реализацию только -moz-transition:0.2s, пока не стал стандартом, что transition:0.2s должен быть признанным синтаксисом. Там много инструментов, которые могут помочь с этим, как Autoprefixer или pleeease.io

Что касается мобильной отзывчивости, ключ, чтобы избежать использования многих элементов фиксированной ширины (т.е. 1024px для основного контейнера) или имеющих media queries и адаптируя неподвижный размеров до определенных размеров дисплея с использованием мультимедийных запросов.
База знаний в Интернете может помочь вам действительно понять больше об этом, но если вы просто хотите попробовать его, вы можете просматривать некоторые популярные запросы СМИ по этому С.О. вопрос: Media Queries: How to target desktop, tablet and mobile?

Answer 2

вам придется узнать, как вы идете, начните с простыми вещами & убедитесь, что у вас есть хороший фундамент. Есть много продвинутых анимаций CSS3, переходов & преобразований, поскольку CSS3 становится все более & более мощным. Проверьте в «Can I Use», чтобы посмотреть, какие браузеры поддерживают ваш CSS. Отзывчивый дизайн основан на запросах медиа (проверка размера экрана) & с использованием процентов, а не px, например, чтобы дизайн мог меняться в зависимости от устройства. Также MDN - отличный инструмент для справки, который также учитывает совместимость браузера.

Answer 3

Вторая часть вашего вопроса:
Написать этот код, чтобы сделать ваш сайт совместит в головной части
Изменить «1.0» часть соответственно.

<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 

Answer 4

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

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    } 

это поможет вам контролировать макет сайта немного лучше