CSS-таргетинг для мобильных устройств

[Антон Золотарев1]

Я знаю, что этот вопрос, вероятно, уже задавался раньше, но, возможно, мы сможем превратить мой вопрос в полезный урок и для других. Я работаю над веб-сайтом, на котором у меня есть изображение (в статье), которое я хочу разместить: влево на экранах ПК и плавать: нет на мобильных устройствах. Я тестировал другой код, но безрезультатно.
(1) Нужно ли размещать перекрытие CSS до или после всех других правил CSS?
(2) Насколько я понимаю, это можно сделать в рамках одной таблицы стилей, верно?

исходный код

.featured-image { margin-top: 6px; margin-right: 1px; margin-left: 7px; margin-bottom: 1px; float: left; width: 100px; 
}

Код (CSS): не хотел ссылаться на сайт, не уверен, считается ли это спамом или нет.

P.S. хотел бы использовать эту тему/пост в качестве постоянного опыта обучения для себя, а также для других, если кто-то готов помочь научить полу-новичка

 

[whoami]

Если у вас нет специального применения, вам обычно не следует использовать «max-device-width»; это не имеет никакого отношения к тому, просматриваете ли вы его на ПК или нет, это в основном проверяет ширину фактического экрана устройства, поскольку она не меняется... поэтому, если я изменю размер ширины своего браузера, то это не собираюсь отвечать; всегда используйте «max-width», поскольку он реагирует на изменения и прекрасно работает на устройствах.

Дополнительно следует указать сначала мобильный в этом случае вы указываете мобильные стили в качестве стилей по умолчанию, а затем переопределяете их для настольных компьютеров/больших экранов, например:

.featured-image { margin-top: 6px; margin-right: 1px; margin-left: 7px; margin-bottom: 1px; float: none; width: 190px;
}
@media only screen and (min-width: 581px) { .featured-image { float: left; }
}

Код (CSS): Кроме того, я не собираюсь вдаваться в дебаты о em и px, но это не так черно-бело, как представляет Deathshadow; если вы хотите использовать относительные единицы, используйте «rem»; с ними гораздо легче работать, поскольку они не образуют комплексов; это не значит, что нет конкретных ситуаций, в которых они могут быть полезны.

 

[John3]

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

Серьезно, если вы меняете размер шрифта достаточно часто, чтобы EM стал «сложным» в использовании, вы, вероятно, слишком часто заявляете слишком много разных размеров шрифта!

По общему признанию, это описывает МНОГИЕ полоумные, умственно ослабленные художники мусора, находящиеся в ЗАБЛЮДЕНИИ, что они «дизайнеры» и маркетологи, которые знают все о веб-сайтах, часто намазывают свои трусики.

 

[Rezki_002]

Возможно, вы захотите закрыть его другим }
Возможно, вы просто забыли его скопировать.

Кроме того, есть ли у вас что-то вроде:



в ?

 

[Kerk1]

Привет, Роджер Банч
Я предлагаю вам изучить или хотя бы понять, как работают медиа-запросы CSS3.
И после этого вы сможете изучить его больше. Проверьте это,

Как использовать медиа-запросы CSS3 для создания мобильной версии вашего сайта
https://www.smashingmagazine.com/20...s-to-create-a-mobile-version-of-your-website/

Использование медиа-запросов CSS для создания адаптивных веб-макетов


Учебное пособие: научитесь использовать CSS Media Queries менее чем за 5 минут.


*Вы можете поискать больше руководств...

Я надеюсь, что это поможет, потому что новичку всегда лучше изучить основы, чтобы вы могли использовать их правильно.