programing

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

testmans 2023. 9. 17. 12:11
반응형

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

HTML5 앱에 배너 이미지를 동적으로 로드해야 하는데 화면 너비에 맞게 몇 가지 버전이 필요합니다.전화기의 화면 폭을 정확하게 파악할 수 없기 때문에 디브의 배경 이미지를 추가하고 @media를 사용하여 화면 폭을 확인하고 올바른 이미지를 표시하는 방법밖에 없습니다.

예를 들어,

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

이것이 가능한가요, 아니면 다른 제안이 있는 사람이 있습니까?

@media는및e만 수할할로다수일n다수및ytyae만 포함할 수 있으므로 인라인 스타일 특성에는 존재할 수 없습니다.property: value포고문들사양에 따르면 다음과 같습니다.

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

할 수 할 한 은 입니다 에 의 을 하는 된 으로 에서만 을 에 a ).<style>element)를 선택할 수 있는 선택할 수 있습니다.브라우저의 개발 도구를 사용하여 하나를 잡거나 이 요소를 분리하는 클래스 및/또는 ID 조합을 파악할 수 있습니다.

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

@media (max-width: 300px) {
    #myelement { background-image: url(particular_ad_small.png); }
}

페이지 특성상 이 요소에만 안정적으로 일치하는 선택기를 찾을 수 없는 경우, 특정성이나 Internet Explorer(인터넷 익스플로러)를 걱정할 필요가 없다면 사용자 지정 속성을 사용할 수 있습니다.

:root { --particular-ad: url(particular_ad.png); }

@media (max-width: 300px) {
    :root { --particular-ad: url(particular_ad_small.png); }
}

<span style="background-image: var(--particular-ad);"></span>

문제

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

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

해결책

할 수 있는 , 은 Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ,style속성이 아닌 마크업.

e.i.

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

코드펜에서 실시간으로 작동하는 코드 보기

들어 제 에서는 , 에서 합니다를 합니다.<style>마크업을 하다<head>에 바로 <link>CSS를 위한 선언으로, 제가 기사를 작성할 때 즉석에서 엑스트라 클래스를 생성할 수 있도록 실제 콘텐츠 텍스트 영역 옆에 제공되는 텍스트 영역의 내용을 포함합니다.

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

예, 그림 태그를 사용하는 경우 인라인-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>

은 현재할 수 . ( 은 의 할 을 ( )property: value짝을 짓습니다.

을 사용할 수 .style π가 있는 media의의 속성head문서의 섹션입니다.

Bootstrap Response Utilities 또는 중단점에 따라 div를 숨기거나 표시할 수 있는 유사한 대안을 사용하는 경우 여러 요소를 사용하여 가장 적합한 요소를 표시하는 것이 가능할 수 있습니다.

 <span class="hidden-xs" style="background: url(particular_ad.png)"></span>
 <span class="visible-xs" style="background: url(particular_ad_small.png)"></span>

스타일 속성의 미디어 쿼리는 지금 할 수 없습니다.하지만 자바스크립트를 통해 동적으로 설정해야 한다면요.JS를 통해서도 해당 규칙을 삽입할 수 있습니다.

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

이것은 마치 스타일시트에 스타일이 있는 것 같습니다.따라서 특수성을 유의해야 합니다.

안녕하세요. 방금 썼어요.

이제 사용할 수 있습니다.<div style="color: red; @media (max-width: 200px) { color: green }">그럭저럭

즐거운 시간 되세요.

테스트를 해봤는데 작동이 안 되는 것 같았는데 애플이 왜 사용하는지 궁금합니다.방금 https://linkmaker.itunes.apple.com/us/ 에 접속했는데 생성된 코드에서 'Large Button' 라디오 버튼을 선택하면 인라인 미디어 쿼리를 사용하고 있다는 것을 알게 되었습니다.

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

참고: 가독성을 위해 줄자를 추가하였으며, 원래 생성된 코드는 최소화하였습니다.

OP의 특정 이슈(반응 이미지)에 대한 자바스크립트 솔루션으로 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>

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);">

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

이 블로그 게시물은 인라인 미디어 쿼리가 별도의 블록보다 더 관리하기 쉬운 방법을 잘 설명합니다.중단점 없음

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

  1. 요소에 대한 미디어 질의에 대한 생각
  2. 미디어 쿼리는 해킹입니다.
  3. 미디어 쿼리가 정답이 아님: 요소 쿼리 폴리필
  4. 만일 다른 것이 막습니다.

print.media 파일에 규칙을 추가하면 @media를 사용할 필요가 없습니다.

나는 내가 몇몇 요소들을 배경색을 주기 위해 사용하는 스마트에 그것을 포함시키지 않았습니다.

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

HTML 수준에서 미디어 쿼리를 생각하지 않았다는 것은 미친 짓입니다. 분명히 스타일 CSS가 HTML 다음에 로드되기 때문에 HTML 내부에서 스타일을 인라인하는 것은 큰 단점입니다.

네, 꽤 가능하지만 HTML 요소에서 javascript 이벤트 속성을 사용하는 경우에만 가능합니다.여기서 모든 html 태그 요소가 모든 js 이벤트를 발화할 수 있는 것은 아니라는 것을 기억해야 합니다. 이 이벤트는 온로드 이벤트처럼 DOM이 로드될 때 크기를 조정하거나 js 코드를 실행하는 등의 DOM 변경 사항을 청취할 수 있습니다.위의 예에서 나는 body와 img tag를 사용합니다. body는 on load 이벤트, body tag는 on load 이벤트, on load 및 on resize 모두에서 발사할 수 있기 때문입니다.이벤트에 따라 예제의 코드를 사용하여 문제를 해결하는 방법을 선택할 수 있습니다.

본문 태그 사용:

<body onload="
const mediaQueryList = window.matchMedia('(max-width: 600px)');
function screenTest(e) {
 if (e.matches) {
 /* the viewport is 600 pixels wide or less */
  console.log('This is a narrow screen — 600px wide or less.');
  document.body.style.backgroundColor = 'pink';
 } else {
 /* the viewport is more than 600 pixels wide */
  console.log('This is a wide screen — more than 600px wide.');
  document.body.style.backgroundColor = 'aquamarine';
 }
}
mediaQueryList.addEventListener('change', screenTest);
" onresize="
if (document.documentElement.offsetWidth <= 600) {
/* the viewport is 600 pixels wide or less */
console.log('This is a narrow screen — 600px wide or less.');
document.body.style.backgroundColor = 'pink';
} else {
/* the viewport is more than 600 pixels wide */
 console.log('This is a wide screen — more than 600px wide.');
 document.body.style.backgroundColor = 'aquamarine';
}
"><!-- Some other code goes here --></body>

img 태그 사용:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==" 
width="100%" style="width: 100vw; height: 1px;" 
alt="" height="1"  
onload="
   const mediaQueryList = window.matchMedia('(max-width: 600px)');
   function screenTest(e) {
     if (e.matches) {
        /* the viewport is 600 pixels wide or less */
        console.log('This is a narrow screen — 600px wide or less.');
        document.body.style.backgroundColor = 'pink';
     } else {
        /* the viewport is more than 600 pixels wide */
        console.log('This is a wide screen — more than 600px wide.');
        document.body.style.backgroundColor = 'aquamarine';
     }
   }
   mediaQueryList.addEventListener('change', screenTest);
" />

미디어 쿼리 css를 HTML 편지에 포함시키는 이 방식을 사용하기로 결정한 경우 대부분의 경우 이러한 자바스크립트 이벤트가 끊어지는 메일 서버의 블랙리스트를 통과하지 못할 수도 있음을 유의해야 합니다.그러나 일부 아약스나 배너, 동적 애플리케이션의 경우에는 이 접근 방식에 문제가 없어야 합니다.

언급URL : https://stackoverflow.com/questions/9808233/is-it-possible-to-put-css-media-rules-inline

반응형

'programing' 카테고리의 다른 글

XML 특성 대 XML 요소  (0) 2023.09.17
$http 호출의 전체 호출 스택 추적 가져오기  (0) 2023.09.17
파워셸에서 오디오 레벨을 변경하시겠습니까?  (0) 2023.09.17
MySQL - 저장 프로시저에서 예외를 두는 방법?  (0) 2023.09.17
제품을 선택하고 카테고리를 계층적으로 결합  (0) 2023.09.17

'programing'의 다른글

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

관련글

댓글

티스토리툴바