เป็นไปได้หรือไม่ที่จะวางกฎ 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

285

ไม่@mediaกฎและข้อความค้นหาสื่อไม่สามารถมีอยู่ในแอตทริบิวต์ลักษณะแบบอินไลน์เนื่องจากสามารถมีได้เฉพาะproperty: valueการประกาศ ในขณะที่สเป็คทำให้มัน:

ค่าของแอตทริบิวต์ลักษณะต้องตรงกับไวยากรณ์ของเนื้อหาของบล็อกการประกาศ 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ไม่ได้อยู่ใน วิธีนี้จะยังคงทำงานได้อย่างสมเหตุสมผลเมื่อคุณซูม

— สิลาสเอส. บราวน์

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 และมันมีเนื้อหาของ textarea ที่ให้ไว้ข้างๆ 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>

— Bruno Lesieur
แหล่งที่มา

10

นี่เป็นคำตอบที่ดีกว่าคำตอบที่ยอมรับได้เพราะมันจะช่วยให้คุณเปลี่ยนแบบไดนามิกbackground-imageเมื่อหน้าโหลด

— Jake Wilson

7

แม้ว่าหลักการกำหนดขอบเขตจะดูดีมาก แต่ Chrome ก็ยกเลิกการสนับสนุนเบื้องต้นไปแล้วสองสามเวอร์ชันและตอนนี้ Firefox เท่านั้นที่มีการสนับสนุนใด ๆ

— Anthony McLin

1

การกำหนดขอบเขตใช้เพื่อไม่อนุญาตให้.on-the-fly-behaviorใช้ แต่ถ้าคำว่า "ไม่สนใจ" โดยตัวนำทางบางตัวไม่ใช่ปัญหา <style> อาจใช้ใน <body> ในทุกระบบนำทางมันใช้งานได้ มันเป็นเพียงข้อกำหนดการตรวจสอบ w3c

— Bruno Lesieur

4

แม้ว่าscopedจะเป็นโซลูชันที่ยอดเยี่ยม แต่เบราว์เซอร์ใดก็ได้ไม่รองรับอย่างเป็นทางการ หวังว่าจะมีการเปลี่ยนแปลงในไม่ช้า

— Ken Sharp

1

นี่เป็นคำถามที่อื่น ๆ เพราะเป้าหมายหลักของอีเมล์คือการอ่านโดยโปรแกรมอีเมลและโปรแกรมอีเมลจำนวนมากไม่สนับสนุนการฝัง<style>หรือmedia queriesหรือทั้งหมด HTML คุณลักษณะ / CSS ดังนั้นจริงๆแล้วปัญหานั้นใหญ่กว่านั้นมาก ฉันรู้ว่าคุณสามารถสร้างอีเมลที่แสดงในลักษณะเดียวกันในอีเมลไคลเอ็นต์ทั้งหมด (รวมอยู่ใน Gmail) ด้วยคุณลักษณะ HTML4 และ CSS2 (พร้อมแฮ็ค Outlook บางตัว) แต่ไม่มี Media Queries ในกรณีนี้

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

— Arif Hussain
แหล่งที่มา

สิ่งนี้ไม่สามารถใช้ได้กับภาพพื้นหลัง CSS: url ()

— Jonas Eberle

10

หากคุณใช้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>

— พาเวล
แหล่งที่มา

3

วิธีแก้ปัญหาที่สวยงาม - ซ่อน div แสดง div ตามเคียวรีสื่อ - ข้อเสียเปรียบเดียวที่ฉันเห็นคือมันจะยังคงโหลดรูปภาพทั้งสองดังนั้นคุณจะส่งทั้งสองไปยังไคลเอนต์

— Michael C. Gates

4

เนื้อหาที่ซ้ำกันไม่ใช่สิ่งที่ดีสำหรับการบำรุงรักษาหรือ SEO

— Bruno Lesieur

1

น่าเสียดายที่นี่เป็นเพื่อนเท็จ! ฉันคิดเกี่ยวกับวิธีแก้ปัญหานี้เช่นกัน แต่เราต้องการให้รูปภาพขนาดเล็กลงเพื่อใช้กับอุปกรณ์ขนาดเล็กและเพื่อประหยัดไบต์เพื่อดาวน์โหลด เทคนิคนี้ตรงกันข้าม

— A. D'Alfonso

8

Media Queries ในสไตล์ลักษณะไม่สามารถทำได้ในขณะนี้ แต่หากคุณต้องตั้งค่านี้แบบไดนามิกผ่าน Javascript คุณสามารถแทรกกฎนั้นผ่าน JS เช่นกัน

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

นี่เป็นสไตล์ที่มีอยู่ในสไตล์ชีท ดังนั้นจงระวังความเฉพาะเจาะจง

— ประเภทสไตล์
แหล่งที่มา

ความคิดใด ๆ เมื่อมันจะเป็นไปได้?

— SuperUberDuper

1

ฉันไม่คิดว่ามันจะเป็น แต่ฉันไม่ได้ตระหนักถึงทุกสิ่งที่กลุ่มทำงานกำลังทำอยู่

— แบบสไตล์

8

เฮ้ฉันเพิ่งเขียนมัน

ตอนนี้คุณสามารถใช้<div style="color: red; @media (max-width: 200px) { color: green }">หรือดังนั้น

สนุก.

— ДаниилПронин
แหล่งที่มา

ฉันลงคะแนนสิ่งนี้เนื่องจากมันดูเหมือนว่าจะได้ผลกลับมาแล้ว แต่ก็ไม่เป็นเช่นนั้น #sad

— honk31

@ honk31 เป็นโลกเพียงกฎ

— ДаниилПронин

7

ฉันพยายามทดสอบสิ่งนี้ แต่ดูเหมือนจะไม่ทำงาน แต่ฉันสงสัยว่าทำไม Apple จึงใช้งาน ฉันอยู่ที่https://linkmaker.itunes.apple.com/us/และสังเกตเห็นในรหัสที่สร้างขึ้นซึ่งให้ไว้หากคุณเลือกปุ่มตัวเลือก 'ปุ่มขนาดใหญ่' พวกเขาใช้การสืบค้นสื่อแบบอินไลน์

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

หมายเหตุ: เพิ่มตัวแบ่งบรรทัดเพื่อเพิ่มความสามารถในการอ่านรหัสที่สร้างขึ้นดั้งเดิมถูกย่อให้เล็กสุด

— davidcondrey
แหล่งที่มา

3

ฉันต้องการทราบสาเหตุ / วิธีที่ Apple ใช้เช่นนั้นด้วย

— Douglas.Sesar

1

รหัสที่อ้างถึงไม่มีอยู่ในลิงก์ที่ให้อีกต่อไป (อย่างน้อยสำหรับฉันบางทีฉันอาจได้รับเนื้อหาที่แตกต่างเนื่องจากอยู่นอกสหรัฐอเมริกา) นอกจากนี้ดูเหมือนว่าจะเป็นคำถามที่แยกต่างหากซึ่งเป็นคำตอบ

— Mark Amery

1

ฉันส่งรายงานข้อผิดพลาดและเชื่อว่าพวกเขาได้ลบออกไป itunesaffiliate.phgsupport.com/hc/en-us/requests/14201

— davidcondrey

4

คุณสามารถใช้ภาพชุด ()

<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

โปรดทราบว่านี่รองรับเฉพาะเบราว์เซอร์ที่ใช้ Webkitเท่านั้น

— Qqwy

สิ่งนี้ไม่ได้ขึ้นอยู่กับขนาด (ตามที่ระบุในคำถาม) แต่ขึ้นอยู่กับปัจจัยการซูมดังนั้นคุณอาจได้รับรูปภาพสำหรับหน้าจอขนาดเล็กบนหน้าจอ 27“ 2560x1440 นั่นอาจเป็นสิ่งที่คุณต้องการ - หรืออาจจะไม่

— Jan Bühler

4

ใช่คุณสามารถทำได้ด้วย javascript โดย window.matchMedia

เดสก์ท็อปสำหรับข้อความสีแดง
แท็บเล็ตสำหรับข้อความสีเขียว
มือถือสำหรับข้อความสีฟ้า

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

โพสต์บล็อกนี้ทำงานได้ดีอธิบายว่าการสืบค้นสื่ออินไลน์นั้นสามารถจัดการได้ดีกว่าบล็อกแยก: ไม่มีการเบรกพอยต์

เกี่ยวข้องกับการสืบค้นสื่ออินไลน์คือแนวคิดของ "การสืบค้นองค์ประกอบ" การอ่านที่น่าสนใจสองสามประการคือ:

— Rafael Lüder
แหล่งที่มา

1

หากคุณเพิ่มกฎลงในไฟล์ print.css คุณไม่จำเป็นต้องใช้ @media

ฉันไม่ได้แยกออกมาใน foreach ที่ฉลาดที่ฉันใช้เพื่อให้องค์ประกอบบางอย่างเป็นสีพื้นหลัง

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

ขยายตัวอย่างข้อมูล

— Paul Wolbers
แหล่งที่มา