Có thể đặt quy tắc CSS @media nội tuyến không?

293

Tôi cần tải động các hình ảnh biểu ngữ vào ứng dụng HTML5 và muốn một vài phiên bản khác nhau phù hợp với độ rộng màn hình. Tôi không thể xác định chính xác chiều rộng màn hình của điện thoại, vì vậy cách duy nhất tôi có thể nghĩ là làm điều này là thêm hình ảnh nền của div và sử dụng @media để xác định chiều rộng màn hình và hiển thị hình ảnh chính xác.

Ví dụ:

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

Điều này là có thể, hoặc có ai có bất kỳ đề nghị nào khác không?

html  css  media-queries 
— Vũ công
nguồn
3
Thất vọng với câu trả lời? Xem bình luận này . Nó có thể giúp.
— rinogo

Câu trả lời:

284

Không, @mediacác quy tắc và truy vấn phương tiện không thể tồn tại trong các thuộc tính kiểu nội tuyến vì chúng chỉ có thể chứa các property: valuekhai báo. Như thông số kỹ thuật đặt nó:

Giá trị của thuộc tính style phải khớp với cú pháp của nội dung của khối khai báo CSS

Cách duy nhất để áp dụng kiểu cho một thành phần chỉ trong một số phương tiện nhất định là với một quy tắc riêng trong biểu định kiểu của bạn, điều đó có nghĩa là bạn sẽ cần phải đưa ra một bộ chọn cho nó.

spanBộ chọn giả sẽ trông như thế này, nhưng nếu bạn đang nhắm mục tiêu một yếu tố rất cụ thể, bạn sẽ cần một bộ chọn cụ thể hơn:

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

@media (max-width: 300px) {
    span { background-image: url(particular_ad_small.png); }
}
— BoltClock
nguồn
70
Bạn cũng có thể chỉ cần đặt một <style>thẻ trong HTML của bạn. Đây là một cách tiếp cận cần thiết cho trường hợp background-imageđược kéo tự động từ cơ sở dữ liệu. Rõ ràng trong biểu định kiểu bên ngoài không phải là nơi thích hợp cho việc đó.
— Jake Wilson
1
@Jakobud: Vâng, không quan trọng vị trí của biểu định kiểu nhưng vấn đề là bạn chỉ có thể làm điều này trong CSS, không phải là thuộc tính kiểu nội tuyến.
— BoltClock
3
Lưu ý với các nhà thám hiểm trong tương lai rằng <script>thẻ thường bị xóa bởi các ứng dụng email khi email được chuyển tiếp, vì vậy mọi người có xu hướng sử dụng các kiểu nội tuyến cho email. Và điều này có nghĩa là không có truy vấn phương tiện truyền thông. Tôi hiện đang tìm kiếm các thực tiễn tốt nhất cho tình huống này, nhưng chỉ là một sự đối đầu thân thiện.
— TCannadySF
3
Vui lòng đặt chiều rộng tối đa tính bằng ems, không phải trong px. Bằng cách đó, nó vẫn sẽ hoạt động hợp lý khi bạn phóng to.
— Silas S. Brown
2
@Silas S. Brown: Đó không phải là vấn đề của tôi. Tôi chỉ phản ánh những gì được sử dụng trong câu hỏi.
— BoltClock
137

Vấn đề

Không, Truy vấn phương tiện không thể được sử dụng theo cách này 

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

Giải pháp

Nhưng nếu bạn muốn cung cấp một hành vi cụ thể có thể sử dụng một cách nhanh chóng và phản hồi nhanh, bạn có thể sử dụng styleđánh dấu chứ không phải thuộc tính.

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>

Xem mã làm việc trực tiếp trên CodePen

Ví dụ, trong Blog của tôi, tôi đã đưa ra một <style>đánh dấu <head>ngay sau khi <link>khai báo CSS và nó chứa nội dung của một văn bản được cung cấp bên cạnh văn bản nội dung thực sự để tạo thêm lớp khi tôi viết một tiêu đề.

Lưu ý: scopedthuộc tính là một phần của đặc tả HTML5. Nếu bạn không sử dụng nó, trình xác nhận sẽ đổ lỗi cho bạn nhưng các trình duyệt hiện không hỗ trợ mục đích thực sự: chỉ giới hạn nội dung <style>trên phần tử cha ngay lập tức và phần tử con của phần tử đó. Phạm vi không bắt buộc nếu <style>phần tử được <head>đánh dấu.

CẬP NHẬT: Tôi khuyên bạn luôn luôn sử dụng các quy tắc trong điện thoại di động theo cách đầu tiên để mã trước đó phải là:

<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
nguồn
10
Đây là một câu trả lời tốt hơn câu trả lời được chấp nhận vì nó cho phép bạn thay đổi linh hoạt background-imagekhi tải trang.
— Jake Wilson
7
Mặc dù về mặt nguyên tắc có vẻ tuyệt vời, Chrome đã loại bỏ hỗ trợ sơ bộ của họ một vài phiên bản trở lại và hiện tại chỉ có Firefox có bất kỳ hỗ trợ nào.
— Anthony McLin
1
Scoped chỉ được sử dụng để không cho phép .on-the-fly-behaviorsử dụng bất kỳ ai nhưng nếu từ này bị «bỏ qua» bởi một số hoa tiêu không phải là vấn đề. <style> có thể được sử dụng trong <body> trong tất cả các bộ điều hướng, nó hoạt động. Nó chỉ là một yêu cầu xác nhận w3c.
— Bruno Lesieur
4
Mặc dù scopedlà một giải pháp tuyệt vời nhưng nó không được hỗ trợ chính thức bởi bất kỳ trình duyệt nào. Hy vọng rằng điều đó sẽ sớm thay đổi.
— Ken Sharp
1
Đây là một câu hỏi khác, vì mục tiêu chính của Email là đọc Email khách hàng và nhiều Email khách hàng không hỗ trợ nhúng <style>hoặc media querieshoặc tất cả tính năng HTML / CSS. Vì vậy, thực sự vấn đề lớn hơn thế. Tôi chỉ biết bạn có thể tạo email được hiển thị theo cùng một cách trên tất cả Email khách hàng (bao gồm Gmail) chỉ với tính năng HTML4 và CSS2 (với một số hack Outlook), nhưng trong trường hợp này không có Truy vấn phương tiện.
— Bruno Lesieur 11/03/2016
15

Kiểu nội tuyến hiện không thể chứa bất cứ thứ gì ngoài khai báo ( property: valuecặp).

Bạn có thể sử dụng stylecác yếu tố với các mediathuộc tính phù hợp trong headphần tài liệu của bạn.

— Marat Tanalin
nguồn
13

Có, bạn có thể viết truy vấn phương tiện trong dòng-css nếu bạn đang sử dụng thẻ hình ảnh. Đối với các kích cỡ thiết bị khác nhau, bạn có thể nhận được hình ảnh khác nhau.

<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
nguồn
Điều này không áp dụng cho hình nền CSS: url ()
— Jonas Eberle
10

Nếu bạn đang sử dụng Bootstrap Responsive Utility hoặc giải pháp thay thế tương tự cho phép ẩn / hiển thị div tùy thuộc vào điểm dừng, có thể sử dụng một số yếu tố và hiển thị phù hợp nhất. I E

 <span class="hidden-xs" style="background: url(particular_ad.png)"></span>
 <span class="visible-xs" style="background: url(particular_ad_small.png)"></span>
— Pavel
nguồn
3
Cách giải quyết tuyệt vời - ẩn div, hiển thị div dựa trên truy vấn phương tiện - nhược điểm duy nhất tôi thấy là nó vẫn sẽ tải cả hai hình ảnh để bạn gửi cả hai đến máy khách.
— Michael C. Gates
4
Nội dung trùng lặp không phải là một điều tốt cho bảo trì hoặc SEO.
— Bruno Lesieur
1
Thật không may đây là một người bạn sai! Tôi cũng nghĩ về giải pháp này, nhưng chúng tôi muốn hình ảnh nhỏ hơn phục vụ cho các thiết bị nhỏ và để lưu byte để tải xuống. Kỹ thuật này thực hiện hoàn toàn ngược lại
— A. D'Alfonso
8

Truy vấn phương tiện theo phong cách-Thuộc tính không thể ngay bây giờ. Nhưng nếu bạn phải thiết lập điều này một cách linh hoạt thông qua Javascript. Bạn có thể chèn quy tắc đó thông qua JS aswell.

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

Điều này giống như phong cách đã có trong bản định kiểu. Vì vậy, nhận thức được tính đặc hiệu.

— Kiểu-Kiểu
nguồn
bất kỳ ý tưởng khi nó sẽ có thể?
— SuperUberDuper
1
Tôi không nghĩ nó sẽ như vậy. Nhưng tôi không nhận thức được tất cả những điều mà các nhóm làm việc đang làm.
— Kiểu-
7

Tôi đã thử kiểm tra cái này và nó dường như không hoạt động nhưng tôi tò mò tại sao Apple lại sử dụng nó. Tôi vừa mới vào https://linkmaker.itunes.apple.com/us/ và nhận thấy trong mã được tạo mà nó cung cấp nếu bạn chọn nút radio 'Nút lớn', họ đang sử dụng truy vấn phương tiện nội tuyến.

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

lưu ý: ngắt dòng được thêm vào để dễ đọc, mã được tạo ban đầu được thu nhỏ

— davidcondrey
nguồn
3
Tôi muốn biết tại sao / làm thế nào Apple cũng sử dụng điều đó
— Douglas.Sesar
1
Mã trích dẫn không còn tồn tại ở liên kết đã cho (ít nhất là đối với tôi; có lẽ tôi nhận được nội dung khác nhau do ở bên ngoài Hoa Kỳ). Bên cạnh đó, điều này thực sự giống như một câu hỏi riêng biệt mà một câu trả lời.
— Đánh dấu Amery
1
Tôi đã gửi một báo cáo lỗi và tôi tin rằng họ đã xóa nó. itunesaffiliate.phgsupport.com/hc/en-us/requests/14201
— davidcondrey
4

Bạn có thể sử dụng bộ ảnh ()

<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
nguồn
2
Lưu ý rằng điều này chỉ được hỗ trợ trong các trình duyệt dựa trên Webkit ngay bây giờ.
— Qqwy
Điều này không hoạt động dựa trên kích thước (như được nêu trong câu hỏi) mà dựa trên hệ số thu phóng, do đó bạn có thể có được hình ảnh cho màn hình nhỏ trên màn hình 27 Đổi 2560x1440. Đó có thể là những gì bạn muốn - hoặc có thể không.
— Jan Bühler
4

có, bạn có thể làm với javascript bằng window.matchMedia

  1. máy tính để bàn cho văn bản màu đỏ

  2. máy tính bảng cho văn bản màu xanh lá cây

  3. điện thoại di động cho văn bản màu xanh

//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>
Mở rộng đoạn trích

— ßãlãjî
nguồn
3

Có thể truy vấn phương tiện truyền thông nội tuyến bằng cách sử dụng một cái gì đó như Breakpoint cho Sass

Bài đăng trên blog này thực hiện tốt công việc giải thích cách truy vấn phương tiện nội tuyến dễ quản lý hơn các khối riêng biệt: Không có Điểm dừng

Liên quan đến truy vấn phương tiện nội tuyến là ý tưởng của "truy vấn phần tử", một vài cách đọc thú vị là:

  1. Suy nghĩ về truy vấn truyền thông cho các yếu tố
  2. Truy vấn truyền thông là một Hack
  3. Truy vấn phương tiện không phải là câu trả lời: Phần tử truy vấn phần tử
  4. nếu khối khác
— Rafael Lüder
nguồn
1

nếu bạn thêm quy tắc vào tệp print.css, bạn không phải sử dụng @media.

Tôi đã loại trừ nó trong thông báo thông minh mà tôi sử dụng để cung cấp cho một số yếu tố màu nền.

<script type='text/javascript'>
  document.styleSheets[3].insertRule(" #caldiv_<?smarty $item.calendar_id ?> { border-color:<?smarty $item.color ?> }", 1);
</script>
Mở rộng đoạn trích

— Paul Wolbers
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.