CSS @media 규칙을 인라인으로 넣을 수 있습니까?

293

배너 이미지를 HTML5 앱에 동적으로로드해야하며 화면 너비에 맞게 몇 가지 다른 버전을 원합니다. 휴대 전화의 화면 너비를 올바르게 결정할 수 없으므로이 작업을 수행 할 수있는 유일한 방법은 div의 배경 이미지를 추가하고 @media를 사용하여 화면 너비를 결정하고 올바른 이미지를 표시하는 것입니다.

예를 들면 다음과 같습니다.

 <span style="background-image:particular_ad.png; @media (max-width:300px){background-image:particular_ad_small.png;}"></span>

이것이 가능합니까, 아니면 다른 제안이 있습니까?

html  css  media-queries 
— 춤추는 사람
소스
3
답변에 실망? 이 의견을 참조하십시오 . 도움이 될 수 있습니다.
— rinogo

답변:

284

아니요, @media규칙과 미디어 쿼리는 property: value선언 만 포함 할 수 있으므로 인라인 스타일 속성에 존재할 수 없습니다 . 로 사양 풋 그것은 :

style 속성의 값은 CSS 선언 블록 내용의 구문과 일치해야합니다.

특정 미디어에서만 요소에 스타일을 적용하는 유일한 방법은 스타일 시트에서 별도의 규칙을 사용하는 것입니다. 따라서 선택기에 대한 선택기가 필요합니다.

더미 span선택기는 다음과 같지만 매우 구체적인 요소를 타겟팅하는 경우 더 구체적인 선택기가 필요합니다.

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

@media (max-width: 300px) {
    span { background-image: url(particular_ad_small.png); }
}
— BoltClock
소스
70
<style>HTML에 태그를 넣을 수도 있습니다. background-image데이터베이스에서 동적으로 가져 오는 경우에 필요한 접근 방식입니다 . 분명히 외부 스타일 시트에는 적합하지 않습니다.
— Jake Wilson
1
@Jakobud : 예, 스타일 시트의 위치는 중요하지 않지만 요점은 인라인 스타일 속성이 아닌 CSS에서만이 작업을 수행 할 수 있다는 것입니다.
— BoltClock
3
미래 탐험가에 참고 <script>태그가 종종 이메일이 전달 될 때 이메일 클라이언트에 의해 제거, 그래서 사람들이 이메일에 대한 인라인 스타일을 사용하는쪽으로 경향이있다. 그리고 이것은 미디어 쿼리가 없다는 것을 의미합니다. 나는 현재이 상황에 대한 모범 사례를 찾고 있지만 우호적입니다.
— TCannadySF
3
에서 최대 너비를 ems 단위로 설정하십시오 px. 그렇게하면 확대 / 축소해도 여전히 잘 작동합니다.
— Silas S. Brown
2
@Silas S. Brown : 그건 내 문제가 아닙니다. 질문에 사용 된 내용을 반영하고 있습니다.
— BoltClock
137

문제

아니요,이 방법으로 미디어 쿼리를 사용할 수 없습니다 

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

해결책

그러나 즉시 사용 가능하고 반응이 빠른 특정 동작을 제공 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 선언 실제 제목 텍스트 영역 옆에 제공된 텍스트 영역의 내용이 포함되어있어 자막을 작성할 때 추가 클래스를 만들 수 있습니다.

참고 :이 scoped속성은 HTML5 사양의 일부입니다. 그것을 사용하지 않으면 유효성 검사기는 당신을 비난하지만 브라우저는 현재 실제 목적을 지원하지 않습니다 <style>. 즉시 부모 요소와 해당 요소의 자식 요소에 대한 내용의 범위를 지정하십시오 . <style>요소가 <head>마크 업인 경우 범위가 필수가 아닙니다 .

업데이트 : 항상 모바일 우선 규칙을 사용하여 이전 코드가 다음과 같아야합니다.

<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>
— 브루노 레 시어
소스
10
background-image페이지가로드 되는 시점 을 동적으로 변경할 수 있기 때문에 허용되는 답변보다 더 나은 답변 입니다.
— Jake Wilson
7
범위가 원칙적으로 훌륭해 보이지만 Chrome은 몇 가지 버전으로 예비 지원을 제거했으며 이제 Firefox 만 지원합니다.
— Anthony McLin
1
Scoped는 .on-the-fly-behavior어떤 단어도 사용할 수 없게 하기 위해 사용되었지만 일부 네비게이터에서 단어가«ignore»인 경우 문제가되지 않습니다. <style>은 모든 네비게이터에서 <body>로 사용될 수 있습니다. 그것은 단지 w3c 유효성 검사 요구 사항입니다.
— Bruno Lesieur
4
scoped훌륭한 솔루션 이지만 모든 브라우저에서 공식적으로 지원하지는 않습니다. 바라건대 곧 바뀔 것입니다.
— Ken Sharp
1
이메일의 주요 목표는 내장 지원하지 않는 클라이언트 이메일 및 많은 클라이언트 이메일로 읽을 수 있기 때문, 타 질문 <style>, 또는 media queries모든 HTML / CSS 기능이나. 실제로 문제는 그보다 더 큽니다. HTML4 및 CSS2 기능 (일부 Outlook 해킹 포함)만으로 모든 클라이언트 전자 메일 (Gmail 포함)에 동일한 방식으로 표시되는 전자 메일을 만들 수 있지만이 경우에는 미디어 쿼리가 없습니다.
— Bruno Lesieur
15

인라인 스타일은 현재 선언 ( property: value페어) 이외의 것을 포함 할 수 없습니다 .

문서 섹션 에서 style적절한 media속성을 가진 요소를 사용할 수 있습니다 head.

— 마랏 타 날린
소스
13

예, 그림 태그를 사용하는 경우 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>
— 아리프 후세인
소스
이것은 CSS 배경 이미지에는 적용되지 않습니다 : url ()
— Jonas Eberle
10

당신이 사용하는 경우 부트 스트랩에게 응답 유틸리티 또는 숨길 수 있습니다 유사한 대안을 / 브레이크 포인트에 따라 div의 표시, 여러 가지 요소를 사용하여 가장 적합한을 표시 할 수 있습니다. 즉

 <span class="hidden-xs" style="background: url(particular_ad.png)"></span>
 <span class="visible-xs" style="background: url(particular_ad_small.png)"></span>
— 파벨
소스
3
div를 숨기고 미디어 쿼리를 기반으로 div를 표시하는 아름다운 해결 방법은 여전히 ​​두 이미지를 모두로드하므로 클라이언트로 이미지를 보내는 것입니다.
— Michael C. Gates
4
중복 콘텐츠는 유지 관리 또는 SEO에 좋지 않습니다.
— Bruno Lesieur
1
불행히도 이것은 잘못된 친구입니다! 나는이 솔루션에 대해서도 생각했지만 작은 장치에 작은 그림을 제공하고 다운로드 할 바이트를 절약하기를 원합니다. 이 기술은 정반대입니다
— A. D' Alfonso
8

현재 스타일 속성의 미디어 쿼리를 사용할 수 없습니다. 그러나 Javascript를 통해 동적으로 설정 해야하는 경우. JS를 통해 해당 규칙을 삽입 할 수도 있습니다.

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

마치 스타일 시트에 스타일이있는 것처럼 보입니다. 따라서 특이성을 인식하십시오.

— 타입 스타일
소스
가능할 때 어떤 아이디어가 있습니까?
— SuperUberDuper 2016 년
1
나는 그것이 될 것이라고 생각하지 않습니다. 그러나 나는 실무 그룹이하고있는 모든 일을 알지 못한다.
— 타입 스타일
7

나는 이것을 테스트하려고 시도했지만 작동하지 않는 것 같지만 Apple이 왜 그것을 사용하고 있는지 궁금합니다. 방금 https://linkmaker.itunes.apple.com/kr/에 있었고 생성 된 코드에서 '큰 버튼'라디오 버튼을 선택하면 인라인 미디어 쿼리를 사용하는 것으로 나타났습니다.

<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>

참고 : 가독성을 위해 추가 된 줄 바꿈, 원래 생성 된 코드가 축소되었습니다.

— 데이비드 콘 드리
소스
3
Apple이 왜 / 어떻게 사용하는지 알고 싶습니다
— Douglas.Sesar
1
따옴표 붙인 코드는 더 이상 주어진 링크에 존재하지 않습니다 (적어도 저에게는 미국 이외의 지역으로 인해 다른 콘텐츠를 얻을 수 있습니다). 게다가 이것은 실제로 별도의 질문에 대한 답인 것처럼 보입니다.
— Mark Amery
1
버그 리포트를 제출 한 후 버그 리포트를 삭제했다고 생각합니다. itunesaffiliate.phgsupport.com/hc/en-us/requests/14201
— davidcondrey
4

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);">
— the7oker
소스
2
— Qqwy
크기에 따라 (질문에 설명 된대로) 작동하지 않지만 확대 / 축소 비율에 따라 작동하므로 27 인치 2560x1440 화면에서 작은 화면의 사진을 얻을 수 있습니다. 그것은 당신이 원하는 것일 수도 있고 아닐 수도 있습니다.
— Jan Bühler
4

예, window.matchMedia 로 자바 스크립트로 할 수 있습니다

  1. 붉은 색 텍스트 데스크탑

  2. 녹색 텍스트 용 태블릿

  3. 파란색 텍스트를위한 모바일

//isat_style_media_query_for_desktop_mobile_tablets
var tablets = window.matchMedia("(max-width:  768px)");//for tablet devices
var mobiles = window.matchMedia("(max-width: 480px)");//for mobile devices
var desktops = window.matchMedia("(min-width: 992px)");//for desktop devices



isat_find_device_tablets(tablets);//apply style for tablets
isat_find_device_mobile(mobiles);//apply style for mobiles
isat_find_device_desktops(desktops);//apply style for desktops
// isat_find_device_desktops(desktops,tablets,mobiles);// Call listener function at run time
tablets.addListener(isat_find_device_tablets);//listen untill detect tablet screen size
desktops.addListener(isat_find_device_desktops);//listen untill detect desktop screen size
mobiles.addListener(isat_find_device_mobile);//listen untill detect mobile devices
// desktops.addListener(isat_find_device_desktops);

 // Attach listener function on state changes

function isat_find_device_mobile(mob)
{
  
// isat mobile style here
var daynight=document.getElementById("daynight");
daynight.style.color="blue";

// isat mobile style here

}

function isat_find_device_desktops(des)
{

// isat mobile style here

var daynight=document.getElementById("daynight");
daynight.style.color="red";
 
//  isat mobile style here
}

function isat_find_device_tablets(tab)
{

// isat mobile style here
var daynight=document.getElementById("daynight");
daynight.style.color="green";

//  isat mobile style here
}


//isat_style_media_query_for_desktop_mobile_tablets
    <div id="daynight">tricky style for mobile,desktop and tablet</div>
스 니펫 확장

— ßãlãjî
소스
3

Sass에 Breakpoint 와 같은 것을 사용하여 인라인 미디어 쿼리가 가능합니다

이 블로그 포스트는 미디어 쿼리는 별도의 블록보다 더 관리가 얼마나 인라인 설명하는 좋은 일을 : 없음 브레이크 포인트가있다

인라인 미디어 쿼리와 관련된 "요소 쿼리"라는 아이디어는 다음과 같습니다.

  1. 요소에 대한 미디어 쿼리에 대한 생각
  2. 미디어 쿼리는 해킹입니다
  3. 미디어 쿼리가 답이 아니다 : 요소 쿼리 폴리 필
  4. 그렇지 않으면 차단
— 라파엘 루더
소스
1

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>
스 니펫 확장

— 폴 울 버스
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.