Я хочу использовать разные таблицы стилей для разных экранов widths (до и после 700px).
<link rel="stylesheet" href='media700.css' media="screen and (max-device-width:700px)">
<link rel="stylesheet" href='media1366.css' media="screen and (min-device-width:701px)">
Не работает. media1366 всегда перезаписывает media700.
3 ответа
width вашего устройства больше, чем 700px, поэтому
max-device-width: 700px
Не правда и
min-device-width: 701px
Верно, поэтому поведение, которое вы испытываете, действительно ожидаемо.
Эти два правила не могут отменять друг друга, поскольку они исключают друг друга.
Вам просто нужно изменить порядок и удалить слово device
<link rel="stylesheet" href='media1366.css' media="screen and (min-width:701px)">
<link rel="stylesheet" href='media700.css' media="screen and (max-width:700px)">
См. Дополнительную информацию об этом ответе о переполнении стека
Вы должны писать медиа-запросы в последовательности от большего размера к меньшему, поэтому в вашем случае файлы должны быть включены в последовательности от более высоких 701 пикселей до более низких 700 пикселей.
<link rel="stylesheet" href='media1366.css' media="screen and (min-device-width:701px)">
<link rel="stylesheet" href='media700.css' media="screen and (max-device-width:700px)">
Похожие вопросы
Связанные вопросы
Новые вопросы
css
CSS (каскадные таблицы стилей) - это язык таблиц стилей представления, используемый для описания внешнего вида и форматирования документов HTML (язык разметки гипертекста), XML (расширяемый язык разметки) и элементов SVG, включая (но не ограничиваясь) цвета, макет, шрифты, и анимации. Также описывается, как элементы должны отображаться на экране, на бумаге, в речи или на других носителях.