Так что я немного новичок, когда дело доходит до современной веб-разработки, и решил вернуться на кон, сделав простой одностраничный веб-сайт с нуля.
Я решил пойти с Фондом, поскольку мне это очень нравится.
Я почти закончил, но у меня проблемы с медиа-запросами. Мне известно, что в Foundation 6 есть 3 точки останова (малая, средняя и большая), и я могу добавить стили медиазапроса для каждой из них.
Однако я надеялся создать стиль, который бы отображался только для небольшого диапазона ширины области просмотра, которые технически находятся в пределах «среднего», но на более крупном конце.
Прямо сейчас среда определяется как (min-width: 40em) и (max-width: 63.9375em). Я надеялся выбрать подходящие стили для (min-width: 40em) и (max-width: 51.56em), а затем применить средние стили от (min-width 51.57em) к (max-width: 63.9375em). ).
Однако, когда я добавил упомянутое правило медиазапроса, оно не сработало. Когда я вручную отредактировал min-width для стандартного правила создания среды:
@media only screen and (min-width: 40em) and (max-width: 51.56em) {
p {font-size: 10rem;}
}
@media only screen and (min-width: 51.57em) and (max-width: 63.9375em) {
p {font-size: 15rem;}
}
Всякий раз, когда размер моего окна просмотра был меньше 51,56, мои стили сбрасывались, и я не мог видеть свой текст 10rem, только обычный текстовый браузер по умолчанию в 16px.
Я проверил документацию, и все, что я видел, это то, что способ добавления новых точек останова - это использование SASS Mix-in. У меня нет никакого опыта с этим, и изучение этого покажется немного излишним (я делаю маленькие шаги).
Нет ли способа сделать это с помощью CSS?
Спасибо!