Как назначить значение CSS для мобильных и настольных компьютеров в одну строку
Самый быстрый и простой способ - использовать iframe. Поместите рамку внизу вашей страницы.
<iframe name="frame"></iframe>
И в вашей форме сделайте это.
<form target="frame">
</form>
и сделайте рамку невидимой в вашем css.
iframe{
display: none;
}
3 ответа
В вашем CSS-файле
// Desktop
.article {
width: 100px;
}
// Mobile
@media only screen and (max-width: 768px) {
.article {
width: 50px;
}
}
Это Медиа-запросы .
В первых строках у нас нет никаких ограничений, но затем вы переопределяете текущее значение [ТОЛЬКО 119] , когда ширина экрана меньше, чем 768px [ 1110]
Используйте Media Queries
Использование точки останова 576px предназначено для всех видов мобильных устройств.
// This is the default size
.article {
width: 100px;
}
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) {
width: 200px;
}
Другой ответ также предназначен для планшетов. Но если вы хотите настроить таргетинг только на мобильные устройства, воспользуйтесь моим решением.
Просто используйте медиазапросы, которые являются лучшим вариантом, чтобы сделать вещи отзывчивыми. В противном случае вы можете взглянуть на flexbox, который является удивительным flexbox