Вопросы Теги

Как использовать отзывчивые фоновые изображения в атрибуте стиля? [Дубликат]

Для вашей информации и для остальной части сообщества я использовал эту командную строку в файле dos: 

sqlplus.exe SIEBEL/mypass@mydb @D:\App\Siebel\EIM\sql\my_sql_command.sql

, и выход был: 

SQL*Plus: Release 11.2.0.1.0 Production on Mar. Sept. 13 11:53:52 2016

Copyright (c) 1982, 2010, Oracle.  All rights reserved.

ERROR:
ORA-12154: TNS : .....

на самом деле, у меня была ошибка в командной строке .... 

sqlplus.exe SIEBEL/mypass@mydb**%** @D:\App\Siebel\EIM\sql\my_sql_command.sql
195
задан Mark Amery 11 June 2015 в 22:57
поделиться

11 ответов

Нет, правила @media и медиа-запросы не могут существовать в встроенных атрибутах стиля, поскольку они могут содержать только объявления property: value. Как spec ставит его:

Значение атрибута style должно соответствовать синтаксису содержимого блока объявления CSS

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

Селектор фиктивного span будет выглядеть так, но если вы нацеливаете очень специфический элемент, вам понадобится более конкретный селектор: 

span { background-image: url(particular_ad.png); }

@media (max-width: 300px) {
    span { background-image: url(particular_ad_small.png); }
}
195
ответ дан Mark Amery 22 August 2018 в 18:03
поделиться
  • 1
    Вы также можете просто добавить тэг <style> в свой HTML. Это необходимый подход для случая, когда background-image динамически извлекается из базы данных. Очевидно, что внешняя таблица стилей не подходит для этого. – Jake Wilson 4 June 2015 в 17:13
  • 2
    @Jakobud: Да, неважно, где находится таблица стилей, но дело в том, что вы можете делать это только в CSS, а не в стиле встроенного атрибута. – BoltClock♦ 4 June 2015 в 17:14
  • 3
    Обратите внимание на будущих исследователей, что тег <script> часто удаляется почтовыми клиентами при отправке электронной почты, поэтому люди склонны использовать встроенные стили для электронных писем. И это означает, что медиа-запросы не нужны. В настоящее время я ищу лучшие практики для этой ситуации, но просто дружеский хэдз-ап. – TCannadySF 16 November 2016 в 20:15
  • 4
    Установите max-width в em s, а не в px. Таким образом, он будет работать разумно при масштабировании. – Silas S. Brown 30 June 2017 в 12:21
  • 5
    Конечно. Просто подумал, что мы должны упомянуть об этом в интересах людей, которые случайно попадают на эту страницу с Google. – Silas S. Brown 30 June 2017 в 12:27

Проблема

Нет, медиапрограммы не могут использоваться таким образом 

<span style="@media (...) { ... }"></span>

Решение

Но если вы хотите, чтобы при использовании определенного поведения fly и responsive, вы можете использовать разметку style, а не атрибут.

ei 

<style scoped>
.on-the-fly-behavior {
    background-image: url('particular_ad.png'); 
}
@media (max-width: 300px) {
    .on-the-fly-behavior {
        background-image: url('particular_ad_small.png');
    }
}
</style>
<span class="on-the-fly-behavior"></span>

См. код, работающий в режиме реального времени в CodePen

В моем блоге, например, я вставляю <style> разметку в <head> сразу после объявления <link> для CSS, и он содержит содержимое текстового поля, предоставленного рядом с реальным контентом textarea, класс «на лету», когда я написал художественное название.

Примечание: атрибут scoped является частью спецификации HTML5. Если вы его не используете, валидатор будет обвинять вас, но браузеры в настоящее время не поддерживают реальную цель: область содержимого <style> выполняется только с родительским элементом и родительскими элементами этого элемента. Область видимости не является обязательной, если элемент <style> находится в разметке <head>.

UPDATE: Я советую всегда использовать правила на первом мобильном телефоне, поэтому предыдущий код должен быть: 

<style scoped>
/* 0 to 299 */
.on-the-fly-behavior {
    background-image: url('particular_ad_small.png'); 
}
/* 300 to X */
@media (min-width: 300px) { /* or 301 if you want really the same as previously.  */
    .on-the-fly-behavior {   
        background-image: url('particular_ad.png');
    }
}
</style>
<span class="on-the-fly-behavior"></span>
92
ответ дан Bruno Lesieur 22 August 2018 в 18:03
поделиться
  • 1
    Это лучший ответ, чем принятый ответ, поскольку он позволяет динамически изменять background-image при загрузке страницы. – Jake Wilson 4 June 2015 в 17:15
  • 2
    Мне нравится этот ответ, слишком плохая поддержка для области в настоящее время очень ограничена. – laughingpine 11 June 2015 в 23:07
  • 3
    Хотя в целом область видима в принципе прекрасна, Chrome удалил предварительную поддержку нескольких версий, и теперь только Firefox имеет какую-либо поддержку. – Anthony McLin 10 July 2015 в 02:36
  • 4
    Область действия используется только для того, чтобы не допускать использование .on-the-fly-behavior anywere, но если слово «игнорировать» каким-то навигатором не является проблемой. & Lt; & стиль GT; могут быть использованы в & lt; body & gt; во всем навигаторе, это работа. Это просто проверка валидации w3c. – Bruno Lesieur 14 November 2015 в 16:50
  • 5
    Хотя scoped - блестящее решение, оно официально не поддерживается ни одним браузером. Надеюсь, это скоро изменится. – Ken Sharp 16 February 2016 в 01:19

Я попытался проверить это, и он не работал, но мне любопытно, почему Apple использует его. Я был только на https://linkmaker.itunes.apple.com/us/ и заметил в сгенерированном коде, который он предоставляет, если вы выберете переключатель «Большая кнопка», они используют встроенный медиа query. 

<a href="#" 
    target="itunes_store" 
    style="
        display:inline-block;
        overflow:hidden;
        background:url(#.png) no-repeat;
        width:135px;
        height:40px;
        @media only screen{
            background-image:url(#);
        }
"></a>

note: добавлены разрывы строк для удобочитаемости, исходный сгенерированный код минимизирован

3
ответ дан davidcondrey 22 August 2018 в 18:03
поделиться
  • 1
    Я хотел бы знать, почему / как Apple использует это – Douglas.Sesar 30 August 2014 в 20:05
  • 2
    Котировальный код больше не существует на данной ссылке (по крайней мере, для меня, возможно, я получаю другой контент из-за того, что не за пределами США). Кроме того, это действительно больше похоже на отдельный вопрос, на который ответ. – Mark Amery 11 June 2015 в 22:55
  • 3
    Я отправил отчет об ошибке, и я считаю, что с тех пор он удалил его. itunesaffiliate.phgsupport.com/hc/en-us/requests/14201 – davidcondrey 25 June 2015 в 04:09

Да, вы можете писать медиа-запрос в inline-css, если используете тег изображения. Для разных размеров устройства вы можете получить разные изображения. 

<picture>
    <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
    <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
    <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
1
ответ дан JJJ 22 August 2018 в 18:03
поделиться

В строковых стилях в настоящее время не может содержаться ничего, кроме объявлений (пары property: value).

Вы можете использовать style элементы с соответствующими атрибутами media в разделе head вашего документа.

13
ответ дан Marat Tanalin 22 August 2018 в 18:03
поделиться

, если вы добавите правило в файл print.css, вам не нужно использовать @media.

Я включил его в smarty foreach, который я использовал, чтобы дать некоторым элементам цвет фона. 

<script type='text/javascript'>
  document.styleSheets[3].insertRule(" #caldiv_<?smarty $item.calendar_id ?> { border-color:<?smarty $item.color ?> }", 1);
</script>

0
ответ дан Paul Wolbers 22 August 2018 в 18:03
поделиться

Если вы используете Bootstrap Responsive Utilities или аналогичную альтернативу, которая позволяет скрыть / показать divs в зависимости от точек останова, возможно, будет возможно использовать несколько элементов и показать наиболее подходящие. то есть 

 <span class="hidden-xs" style="background: url(particular_ad.png)"></span>
 <span class="visible-xs" style="background: url(particular_ad_small.png)"></span>
6
ответ дан Pavel 22 August 2018 в 18:03
поделиться
  • 1
    Красивый обходной путь - скрыть div, показать div на основе медиа-запроса - единственный недостаток, который я вижу, это все равно загрузить оба изображения, чтобы вы отправляли их клиенту. – Michael C. Gates 20 November 2014 в 14:13
  • 2
    Повторяющийся контент не очень хорош для обслуживания или SEO. – Bruno Lesieur 14 October 2015 в 12:15
  • 3
    К сожалению, это ложный друг! Я тоже думал об этом решении, но мы хотим, чтобы меньшая картинка служила маленьким устройствам и чтобы сохранять байты для загрузки. Эта техника делает точно противоположную – 16am 14 July 2017 в 11:36

Запросы встроенных медиаданных возможны, используя что-то вроде Breakpoint для Sass

. Это сообщение в блоге хорошо описывает, как встроенные медиа-запросы более управляемы, чем отдельные блоки: Нет точки останова

В связи с запросами встроенных медиа - идея «элементарных запросов», несколько интересных чтений:

  1. Мысли на медиа-запросах для элементов
  2. Запросы к мультимедиа - это хак
  3. Запросы к медиа не являются ответом: запрос на заполнение элементов
  4. , если else блоки
2
ответ дан Rafael Lüder 22 August 2018 в 18:03
поделиться

Вы можете использовать image-set () 

<div style="
  background-image: url(icon1x.png);
  background-image: -webkit-image-set(  
    url(icon1x.png) 1x,  
    url(icon2x.png) 2x);  
  background-image: image-set(  
    url(icon1x.png) 1x,  
    url(icon2x.png) 2x);">
2
ответ дан the7oker 22 August 2018 в 18:03
поделиться

Запросы к медиа в стиле-атрибуты невозможны прямо сейчас. Но если вы должны установить это динамически с помощью Javascript. Вы также можете вставить это правило через JS. 

document.styleSheets[0].insertRule("@media only screen and (max-width : 300px) { span { background-image:particular_ad_small.png; } }","");

Это как если бы стиль был в таблице стилей. Поэтому имейте в виду специфику.

4
ответ дан Type-Style 22 August 2018 в 18:03
поделиться
  • 1
    любые идеи, когда это будет возможно? – SuperUberDuper 15 June 2016 в 10:28
  • 2
    Я не думаю, что так будет. Но я не знаю, что делают рабочие группы. – Type-Style 15 June 2016 в 12:59

Эй, я просто написал это.

Теперь вы можете использовать <div style="color: red; @media (max-width: 200px) { color: green }"> или так.

Наслаждайтесь.

3
ответ дан Даниил Пронин 22 August 2018 в 18:03
поделиться
  • 1
    Я проголосовал за это, так как, похоже, он работал тогда, но это не так. #грустный – honk31 13 May 2017 в 13:15
  • 2
    @ honk31 это мир только для одного правила – Даниил Пронин 13 May 2017 в 13:17
Другие вопросы по тегам:

Похожие вопросы: