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

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

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

Я работаю над веб-сайтом, на котором у меня есть изображение (в статье), которое я хочу разместить: влево на экранах ПК и плавать: нет на мобильных устройствах.

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

исходный код

 .featured-image {

margin-top: 6px;

margin-right: 1px;

margin-left: 7px;

margin-bottom: 1px;

float: left;

width: 100px;

/* height: 200px; */
}

Код (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 минут.

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

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

leads

Мистер Смертельная Тень, вам следует сначала выяснить обстоятельства, прежде чем начинать мочиться на ноги другим людям.

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

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

Adtoapp

За исключением того, что ПОСЛЕДНИМ «общедоступным» браузером, соответствовавшим G142, была Opera 12, поскольку браузеры на основе Gecko никогда не встречали его, браузеры на основе Webkit/Blink не соответствуют ему, а IE9/более поздние версии НЕ СООТВЕТСТВУЮТ ЭТОМУ ТРЕБОВАНИЮ.

(есть причина, по которой G142 называет IE7 и Opera по имени, но опускает Firefox / Mozilla Suite!)

НЕ то, что принуждение пользователей нырять в поисках увеличения — это хорошее удобство использования; но когда браузер на самом деле не может выполнить всю работу, необходимую для того, чтобы сделать макеты при масштабировании полезными, теперь НЕВОЗМОЖНО выполнить G142, поскольку ни один из широко используемых браузеров не обеспечивает указанную функциональность.

Ну, если только у вас нет полного контроля над средой развертывания, чтобы все использовали либо Opera 12.18 или более раннюю версию, либо IE8 или более раннюю версию.

Но теперь, когда единственный браузер, который ДЕЙСТВИТЕЛЬНО сделал это стоящим (настоящая Opera), мертв и похоронен, с дымящейся кучей ДЕРЬМА, которая представляет собой логотип Opera, нанесенный на Chrome любым старым способом, полностью лишенный ЛЮБЫХ функций, которые сделали Opera стоит использовать в первую очередь (и это был не механизм рендеринга или браузерный движок) ... ну, есть причина, по которой большинство «настоящих» пользователей Opera теперь используют Vivaldi.

Опять же, просто еще более жалкие оправдания, чтобы прикрыть некомпетентность такой невероятно простой вещи, как EM.

Gabda96

Да, кажется, я связался с частью вышеизложенного, когда махал руками. В любом случае, приятного общения — ответьте, если хотите, но я не собираюсь больше тратить время на кого-то вроде вас. Мне нравятся хорошие дебаты так же, как и любому другому парню, но вы можете заслужить больше уважения и обучить больше людей, изменив отношение и попытавшись показаться полезными, а не травить и клеветать на людей и думать, что ваш образ мышления - это Евангелие. Добрый день!

xenox1

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

Клиенты ценят это, даже если вы этого не делаете.

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

Есть причина, намазанная фальшивыми улыбками, банальностями, и отношение «если ты не можешь сказать ничего хорошего» встречается только в бизнесе с мошенниками, двумя торгашами и людьми, достаточно ТУПЫМИ, чтобы проглотить свою ложь, крючок, леска, грузило.

и немного стержня.

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

ЭТО взрослый подход.

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

Som-200 Kot

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

orkosam

НЕ устанавливайте максимальный масштаб в мета-окне просмотра, вы просто лишаете пользователя возможности масштабировать!

Также, в зависимости от изображения и макета, вы можете захотеть использовать медиа-запросы EM вместо PX... но это будет зависеть от того, используете ли вы шрифты EM, как добрый маленький дурак, или вы злитесь на доступность, используя PX там тоже.

Что, учитывая использование вами полей в пикселях, кажется возможным.

Вы устанавливаете что-то вроде размера шрифта: 12 пикселей; или размер шрифта: 18 пикселей; вы только что потерпели неудачу в базовой веб-разработке.

(см. сайт powerurgemedia с вашего аватара)

MaxTrust

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

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

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

Черт, даже для настольных компьютеров с большим экраном.

Хуже того, он может даже игнорировать предпочтительные размеры посетителей. Так что примите близко к сердцу комментарии @deathshadow и начните копать.

В противном случае примите тот факт, что большинство тем — это дерьмо, и запускайте их без изменений, зная, что это дерьмо. Гэри

Алексей Дёмин

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

 body {

font-size: 36px;

font-size: 2.25rem;
}

Код (CSS). Таким образом, браузеры, поддерживать rem перезапишет предыдущее объявление, а браузеры, которые не поддержка rem проигнорирует это.

Hinata Uzumaki

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

ЕСЛИ это все, что нужно, чтобы добиться от тебя такой реакции, ты бы не стал продержаться ни минуты в Нью-Йорке в реальном бизнесе. У вас есть проблемы, КАК СМЕЕТ кто-то в кратких откровенных выражениях указывать на них.

верно.

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

Часто кажется, что некоторые люди просто не могут принять предложения о реальной помощи и вместо этого начинают защищаться, если вы даже упоминаете, что что-то плохое, независимо от того, какое это полное дерьмо.

ДЖО ЗАПРЕЩАЕТ, чтобы мы называли какашку какашкой.

Серьезно, что, черт возьми, сейчас не так с людьми?!?

sasa1234

Я хотел сказать, что когда люди появляются и даже не узнав обстоятельств, они кричат: «О, ты провалился». Очень хороший способ поприветствовать человека, который просит о помощи и хочет чему-то научиться, это определенно не лучший представитель здесь. в любом случае, идем дальше.

bausov

Ну, думаю, я только что научился чему-то с тех пор, как опубликовал это.

Знатоки поправьте меня, если я ошибаюсь. Я разместил правила таргетинга CSS в конце таблицы стилей, например:

 @media only screen and (max-width: 580px) {
.featured-image {

margin-top: 6px;

margin-right: 1px;

margin-left: 7px;

margin-bottom: 1px;

float: none;

width: 190px;
}

Код (CSS): использовал «max-width» вместо «Max-Device-width», чтобы я мог протестировать его на ПК. Очевидно, установка этих правил «после» ваших первоначальных правил допускает перезапись. Теперь элемент div плавает влево в браузере и отсутствует на экранах с разрешением до 580 пикселей.

PA3ГoвoPЧИBЫЙ

Да, у меня есть следующее Кстати, спасибо, что указали на скобку, которую я забыл вставить, легко забыть мелочи

News-Lane

Я работаю в области доступности Интернета, ВСЕ дерьмо, против которого я выступаю, - это то, из-за чего у моих клиентов возникают проблемы с законом.

Трудно уважать людей, которые принимают иррациональные бессмысленные решения, игнорируя такие вещи, как Рекомендации по обеспечению доступности веб-контента, всю причину существования HTML, почему HTML и CSS отделены друг от друга, почему у нас вообще есть семантическая разметка, а также результаты и советы.

исходя из исследований юзабилити, проведенных такими организациями, как nnGroup.

Уважение нужно заслужить, иначе это не более чем розовые банальности, которые позволяют мешкам с грязью мошенникам проникнуть в дверь; и прямо сейчас существует СЛИШКОМ много торговцев змеиным маслом и двух торгашей, наживающихся на невежестве - гораздо меньше нубов и грубиянов, слепо повторяющих плохую информацию, худшие практики и откровенно умственно ослабленные методологии!

Похожие темы	Дата
Как, черт возьми, бутстрап «проще»?	19.10.2024, 18:10
Возможен ли этот трюк с показом CSS?	19.10.2024, 18:10
Нужна помощь в преобразовании шаблона в шаблон мобильного браузера.	19.10.2024, 18:10
Выход из WIX: сужение моих возможностей	19.10.2024, 18:10
Почему мой навигационный значок «гамбургер» внезапно стал невидимым, но все еще работает?	19.10.2024, 18:10
Пожалуйста, помогите мне решить проблему с моей домашней страницей.	19.10.2024, 18:10
PHP-файл получает содержимое, а cURL ничего не отображает	19.10.2024, 18:10
смс для html	19.10.2024, 18:10
SVG-карты с подсказками	19.10.2024, 18:10
Мне нужна помощь, чтобы добавить в мой блог что-то, что я видел на форуме.	19.10.2024, 18:10

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

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

whoami

John3

Rezki_002

Kerk1

leads

Adtoapp

Gabda96

xenox1

Som-200 Kot

orkosam

MaxTrust

Алексей Дёмин

Hinata Uzumaki

sasa1234

bausov

PA3ГoвoPЧИBЫЙ

News-Lane

I AM

Интересно