배너 이미지를 HTML5 앱에 동적으로로드해야하며 화면 너비에 맞게 몇 가지 다른 버전을 원합니다. 휴대 전화의 화면 너비를 올바르게 결정할 수 없으므로이 작업을 수행 할 수있는 유일한 방법은 div의 배경 이미지를 추가하고 @media를 사용하여 화면 너비를 결정하고 올바른 이미지를 표시하는 것입니다.
예를 들면 다음과 같습니다.
<span style="background-image:particular_ad.png; @media (max-width:300px){background-image:particular_ad_small.png;}"></span>이것이 가능합니까, 아니면 다른 제안이 있습니까?
답변
아니요, @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); }
}답변
문제
아니요,이 방법으로 미디어 쿼리를 사용할 수 없습니다
<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>예를 들어, 내 블로그 <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>답변
인라인 스타일은 현재 선언 ( property: value페어) 이외의 것을 포함 할 수 없습니다 .
문서 섹션 에서 style적절한 media속성을 가진 요소를 사용할 수 있습니다 head.
답변
예, 그림 태그를 사용하는 경우 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>답변
당신이 사용하는 경우 부트 스트랩에게 응답 유틸리티 또는 숨길 수 있습니다 유사한 대안을 / 브레이크 포인트에 따라 div의 표시, 여러 가지 요소를 사용하여 가장 적합한을 표시 할 수 있습니다. 즉
<span class="hidden-xs" style="background: url(particular_ad.png)"></span>
<span class="visible-xs" style="background: url(particular_ad_small.png)"></span>답변
현재 스타일 속성의 미디어 쿼리를 사용할 수 없습니다. 그러나 Javascript를 통해 동적으로 설정 해야하는 경우. JS를 통해 해당 규칙을 삽입 할 수도 있습니다.
document.styleSheets[0].insertRule("@media only screen and (max-width : 300px) { span { background-image:particular_ad_small.png; } }","");마치 스타일 시트에 스타일이있는 것처럼 보입니다. 따라서 특이성을 인식하십시오.