ロゴが黒、ロゴが白の2つの画像があります。ブラウザのサイズが768px未満であれば白いロゴ、大きい場合は黒いロゴを使用したいと思います。私は何かを試しましたが、ページをリロードした場合に限り、リアルタイムで変化していません。ブラウザの画面解像度に基づいてロゴ画像を変更してください
$(function() {
if($(window).width() < 768){
$('.logo').find("img").attr("src","/images/Trin-02.png");
}
else{
$('.logo').find("img").attr("src","/images/Trin-01.png");
}
});
ご提案がありますか？ありがとう
https://api.jquery.com/resize/
あなたは正しく、ウィンドウの幅をチェックされますが、あなただけではときに、ページが最初にロードそれをやっています！代わりに
、スクリプトを我々がないことについて、すべてのニーズと要件を行うものの、これは、より多くのCSSメディアクエリのための仕事のように聞こえるのに画面が
$(window).on("resize", function(){
if($(window).width() < 768){
$('.logo').find("img").attr("src","/images/Trin-02.png");
}
else{
$('.logo').find("img").attr("src","/images/Trin-01.png");
}
})
サイズが変更されるたびに実行するresize機能を使用:)
ありがとう！それは本当にうまくいった – Albert
私はあなただけのCSSメディアクエリでそれを行うことができます
document.getElementsByTagName("BODY")[0].onresize = function() {
if (window.outerWidth < 768) {
document.getElementById("img").src = yourFirstImage.png;
} else {
document.getElementById("img").src = yourSecondImage.png;
}
}
これはまだ最初の負荷でのみ表示されます。ウィンドウのサイズを変更するときにチェックを行う必要があります。 – callback
@コールバックが固定 –
純粋なJavaScriptのソリューションを持っています。ここで
img {
width: 400px;
content:url("http://mnprogressiveproject.com/wp-content/uploads/2014/02/kitten.jpg");
}
@media screen and (max-width: 768px) {
img {
content:url("http://images6.fanpop.com/image/photos/34800000/Kittens-3-animals-34865509-1680-1050.jpg");
}
}<img alt="">私はDNNで働いているので、ロゴはdinamically提供されます。だから私はメディアクエリの代わりにjavascriptを使用する方が気分が良いのです。ありがとうございました！ – Albert
最も簡単な解決策である、だから、CSS3メディアクエリ、
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>media queries</title>
<style>
@media screen and (max-width: 780px) {
body {
background-image: url("/images/Trin-02.png");
}
}
@media screen and (min-width: 780px) {
body {
background-image: url("/images/Trin-01.png");
}
}
</style>
</head>
<body>
</body>
</html>を使用して、uが画像ACCを持つことができます。あなたが使用しているデバイスに
imgname.SVGを入力し、cssを使用して色を変更してください。 （SVGはスケーラブルベクターグラフィックスとlmageは良質のものであろうです）
HTML
<div class="logo"> <a href="index.html"><img src="images/imagename.svg"></a> </div>
CSS
@media only screen and (max-width: 768px) {
.logo img{
background-color:#000;
height:50px;
width:100%;
}
}
画像を複数回ターゲットにする必要はありません。参照を一度保存し、複数回使用します。
resizeイベントのコールバック関数を作成してバインドします。こうすることで、コールバック関数を呼び出して、initに正しいイメージを設定することもできます。
var image = $('.logo').find("img");
function setImage() {
var windowWidth = window.innerWidth,
src = (windowWidth < 768) ? '/images/Trin-02.png' : '/images/Trin-01.png';
image.attr('src', src);
}
$(window).on('resize', setImage);
setImage();
あなたはメディアクエリでCSSを試してみたのですか？ @media screenと（max-width：768px）の例では？ –
あなたのhtmlを見せてください。 – callback