Как применить CSS для каждого ПК / мобильного [WordPress]

2019 год 7 месяц 10 день2021 год 7 месяц 28 день

Содержание

1. Предполагая такую ситуацию
2. метод
3. Ссылка: ширина экрана

Предполагая такую ситуацию

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

метод

Просто следуйте «@media screen», укажите ширину экрана устройства, которое вы хотите отобразить, с помощью «и ()» и введите код CSS в «{}».　

Отражать только на ПК

@media screen и (min-width: 980px) {введите здесь CSS}

Отражайте только на планшетах

@media screen и (min-width: 481px) и (max-width: 979px) {введите здесь CSS}

Размышляйте только на мобильном телефоне

@media screen и (max-width: 480 пикселей) {введите здесь CSS}

Только ПК и планшет или только планшет и мобильный телефон

/ * ПК и планшет * / @media screen и (mix-width: 481px) {введите CSS здесь} / * Tablet и mobile * / @media screen и (max-width: 980px) {введите CSS здесь}

「максимальная ширина: 480 пикселейШирина экранаУстройство до 480 пикселей = 480 пикселей или меньшеСмартфон и т. Д.

наоборот"минимальная ширина: 980 пикселей«Я,Минимум 980 пикселей = 980 пикселей или болееКомпьютер имеет ширину экрана.

Только ПК и планшет

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

Смартфон	: 480 пикселей или меньше
таблетка	: 768 ~ 980 пикселей
ПК	: 980 пикселей или более

Ссылка: ширина экрана

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

На iPhone следующее изображение будет ориентировочным размером экрана. В CSS ширина экранаpx (пиксели)Но со стороны устройствапунктовОбратите внимание, что это выражается как.