Intereting Posts
get_terms – только верхний уровень Как перечислить родительскую таксономию только для тех, кто подает заявки на суб-термины, а затем сообщения Добавление «ответа на» в письме Не удалось получить доступ к пользовательскому плагину Контролировать время добавления сообщений в RSS? Как редактировать стили для таблицы страниц / сообщений, перечисленных в админе, когда вы нажимаете на страницы / сообщения? wordpress / woocommerce login url не перенаправляет правильно Как автоматизировать настройку темы, страниц, виджетов и т. Д. Для нового сайта на нескольких сайтах? get_post_type () и проблема WP_QUERY Функция wp_create_nonce не работает внутри плагина? Почему не удается PHPUnit UnitTest Мой сайт WordPress str_replace the_title (); блюз Какова хорошая стратегия для планирования роста WordPress DB? Изменить ссылку на изображение: wp_get_attachment_link Есть ли ярлык для изменения массовых изображений BMP на изображения JPG на сайте?

@media применяется во всем мире, а не отдельно для каждой ширины экрана

У меня есть таблица стилей 1920px с шириной страницы 1560 пикселей. Я пытаюсь создать следующую ширину для экранов 1366px с помощью запросов @media но когда я изменю что-либо, это изменится во всем мире.

Я новичок в CSS и HTML, и мне действительно нужна помощь, связанная с отдельными таблицами стилей (1920px, 1366, 768, 360), которые я могу редактировать без какого-либо влияния на другое. Я пробовал этот код безуспешно:

 <script type="text/javascript"> var reswidth = screen.width; if (reswidth < 1560) {document.write('<link rel="stylesheet" type="text/css" href="style1366px.css" />');} else {document.write('<link rel="stylesheet" type="text/css" href="style.css" />');} 

Я действительно хотел бы реализовать этот код в запросе @media:

 -moz-transform: scale(0.9); -webkit-transform: scale(0.9); -ms-transform: scale(0.9); 

Я часами тратил часы, но я не смог понять это. У меня есть сайт, загруженный в Dropbox . Если кто-то может помочь, я буду искренне благодарен.

Я также не могу понять, как сохранить верхнее правое и главное меню в соответствии с полем поиска при изменении размера окна браузера по горизонтали, поэтому, если у кого есть время, то, пожалуйста, помогите, я начинаю его потерять 🙂

Ваш вопрос не в тему, но некоторые быстрые советы.

Чтобы напечатать свой стиль, вы можете использовать wp_add_inline_style() . найдите таблицу стилей и зацепите ее, чтобы напечатать ваши стили, вместо того, чтобы использовать ссылку стиля в ссылке на скрипт (которая, очевидно, не будет работать). Это пример для вас, который находится в файле functions.php вашей темы / дочерней темы:

 function add_my_inline_css(){ wp_add_inline_style('HOOK','@media {body { color:black } }'); } add_action('wp_enqueue_scripts','add_my_inline_css',999); 

Это лучшая практика добавления встроенного CSS в заголовок вашей темы. Измените HOOK на идентификатор стилей вашей темы. Вы можете найти его в заголовке своей темы на любой странице. Например, если это стиль в заголовке вашей темы:

 <link id="kymadic-css" rel="stylesheet" type="text/css" href="https://example.com/wp-content/theme/my-theme/tyle.css"> 

Тогда имя вашего крюка является kymadic . После использования вышеуказанного кода это будет добавлено в заголовок вашей темы:

 <style>@media {body { color:black } }</style> 

Теперь, подсказка для отзывчивого дизайна. Запросы СМИ могут быть ограничены минимальной и максимальной шириной. Общий синтаксис для медиа-запроса выглядит так:

 @media only screen and (max-width: 1000px) and (min-width: 800px) { ... } 

Это будет активировано, если размер вашего экрана превышает 800 пикселей в ширину, но не более 1000 пикселей. Вы можете удалить один из запросов, например:

 @media only screen and (max-width: 1000px) { ... } 

Будет влиять на любой экран размером менее 1000 пикселей, и это:

 @media only screen and (min-width: 800px){ ... } 

Будет влиять на любой экран размером более 800 пикселей. Вы можете больше узнать об адаптивном дизайне в W3Schools .