Изменить CSS на смартфоне/планшете
У меня есть div с float:right, он очень хорошо работает на экране компьютера, с другой стороны на телефоне/планшете я бы хотел, чтобы этот div переходил в float:left. Как я могу интегрировать это условие в мой CSS?
Спасибо за любую помощь и объяснение.
Если вы только начинаете работать с адаптивным дизайном и хотите научиться, я бы посоветовал вам изучить учебник о том, как делать адаптивный дизайн . Существует ментальная модель, которую действительно полезно иметь при этом, а именно Mobile first . Я вижу, что несколько ответов делают max-width, не поддавайтесь такому подходу (пожалуйста, не делайте этого). Если вы хотите получить стандартные медиа-запросы, то я предлагаю вам посмотреть на них из Tailwind
Ответы 2
Вы ищете media queries
Если окно браузера имеет размер 600 пикселей или меньше, цвет фона будет светло-голубым:
body {
background-color: lightgreen;
}
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<style>
</style>
</head>
<body>
<p>Resize the browser window. When the width of this document is 600 pixels or less, the background-color is "lightblue", otherwise it is "lightgreen".</p>
</body>
</html>Вы также можете проверить эту ссылку https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Спасибо большое, понял!
Я понял ваши ответы и благодарю вас за это. Итак, у меня было: .group-input { display: inline-block; нижняя граница: 0px; поплавок: справа; отступ слева: 10px; выравнивание текста: вправо; } Я добавляю ниже: @media (max-width: 572px) { .group-input { float: left; !important } } Но не берется... Как заставить ?
используйте !important в конце вашего стиля, чтобы переопределить все стили. Если ваше условие верно, стиль будет выполнен.stackoverflow.com/questions/9245353/…
Вам нужны медиа-запросы :) Полезные ресурсы
- https://www.w3schools.com/css/css_rwd_mediaqueries.asp
- https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
- https://www.w3schools.com/howto/howto_css_media_query_breakpoints.asp
Большое спасибо !
Попробуйте поискать
@mediaзапросы :) они позволяют это сделать