#html #css #sass #responsive-design
#HTML #css #дерзкий #адаптивный дизайн
Вопрос:
Я пытался сделать свой сайт адаптивным, но это не работает. С помощью @media я хочу определить разные области, но с моим кодом ничего не получится.
@media (max-width: 1400px) {
#football {
left: 70%;
top: 0%;
}
#skiing {
left: 70%;
top: 30%;
}
#volleyball {
left: 70%;
top: 60%;
}
}
Что-то не так?
Комментарии:
1. В вашем
@mediaправиле отсутствует закрывающая фигурная скобка (}).2. Просто забыл скопировать
3. Вы уверены, что эти теги являются идентификаторами, а не классами? Если использовать класс. вместо #. Также я бы, вероятно, добавил позицию к каждому из этих элементов, например, position: relative или position: absolute (в зависимости от вашего требования) Смотрите здесь: w3schools.com/cssref/pr_pos_top.asp
4. Теги являются идентификаторами, и я определил позицию для всех из них
5.
@media screen and (max-width: 1400px) { ...// rest of your code }
Ответ №1:
Не забудьте поместить медиа-запрос в конец вашего кода. Также не забудьте добавить этот мета-тег к элементу head в html-файле.
<meta name="viewport" content="width= device-width, initial-scale= 1.0">
Кстати, попробуйте отредактировать запрос следующим образом:
@media only screen and (max-width: 1400px) {
#football {
left: 70%;
top: 0%;
}
#skiing {
left: 70%;
top: 30%;
}
#volleyball {
left: 70%;
top: 60%;
}
}
Ответ №2:
попробуйте определить тип
@media all and (max-width: 1400px){
your code
}
и не забудьте добавить мета-тег в тег head
<meta name="viewport" content="width= device-width, initial-scale= 1.0">
Ответ №3:
Убедитесь, что у вас есть встроенный мета-тег внутри <head> :
HTML:
<meta name="viewport" content="width= device-width, initial-scale= 1.0">
css:
@media all and (max-width: 1400px){
/* your code */
}