Juste une question sur CSS pour les appareils mobiles,
J'ai une image qui est de 1260px de large sur mon site Web et lorsque je le regarde sur le téléphone, ilttoutte le site Web car le reste du site Web est basé sur une mise en page 960PX.
J'ai fabriqué ces images à être maintenant 960px de large pour le périphérique mobile, mais comment spécifier dans CSS que s'il s'agit d'une image optimisée mobile d'utilisation mobile au lieu de celui sur le site Web régulier.
Donc, fondamentalement, si un utilisateur passe sur le site Web sur un ordinateur de bureau, il affichera l'image 1260px
Et s'ils visitent le site Web sur un mobile, il affichera l'image 960px
TOUTES IDÉES GUYS?
3 Réponses :
Vous recherchez des requêtes de média. Vous pouvez écrire des styles conditionnels sur la largeur:
http://webdesignerwall.com/tatudials/responsive-design- avec-CSS3-Media-Series
Je ne sais pas si vous voulez JS, j'ai décidé de répondre à votre question si vous voulez CSS3, essayez ceci:
HTML: P>
$(document).ready(function() {
function imageresize() {
var contentwidth = $('#content').width();
if ((contentwidth) < '960'){
$('.imageclass').attr('src','image-960px.jpg');
} else {
$('.imageclass').attr('src','image-1260px.jpg');
}
}
imageresize();//Activates when document first loads  Â
$(window).bind("resize", function(){
imageresize();
});
});
Puis-je avoir le JavaScript s'il vous plaît, pour que je puisse voir les deux chemins merci
Avec jQuery: $ (document) .Ready (fonction (fonction () {Fonction Imageresizeize () {var Contentwidth = $ ('# Content'). Largeur (); Si ((((((("ContentWidth) <'$ 960') {$ ( '.imageclass')). attr (src ',' 960-image.jpg ');} else {$ (' imageclass '). ATTR (' SRC ',' 1260-image.jpg ');}} Imagineresize (); // active lorsque le document First Charces $ (Fenêtre) .Bind ("redimensionner", fonction () {// redimensionne l'image lorsque le navigateur a redimensionné imageuresize ();});});});});});});
Euh ... cette mise en page de commentaire a sauté ces espaces, laissez-moi republier ceci pour la réponse
Désolé, l'image im en utilisant est une image d'arrière-plan dans CSS sur un élément div, donc je ne peux pas appliquer data-src-960px = "image-960px.jpg" ..... Que dois-je faire?
Il semble que ce CSS3 est conçu pour les navigateurs modernes les plus récents et mis à jour, il ne fonctionne pas pour les navigateurs plus anciens qui prennent en charge les données-src ... Pouvez-vous essayer la version JQuery?
Son ok, je viens de spécifier le nouveau style div dans votre code ci-dessus IMG [.......] .... a travaillé un charme !!! santé mec
FWIW, le remplacement de contenu pour les images ne fonctionnait pas pour moi. Le contenu ne semble que s'appliquer à pseudo éléments - non?
Cette solution CSS-seule-Seule est-elle toujours actuelle? Je traînais avec elle pendant plus d'une heure mais semblent avoir d'aucune chance. La documentation Mozilla suggère qu'il ne devrait pas y avoir de virgule avant «URL» (mais cela n'a fait aucune différence pour moi). J'ai mis en place un violon au cas où n'importe qui peut aider: jsfiddle.net/coliniloc/9ck9d105 merci !
Inspiré de la réponse d'Ivan, voici une version de jQuery qui utilise des requêtes de médias pour être aussi proches que possible de sa solution CSS3 (qui ne fonctionne pas pour moi dans Firefox 31 et Safari 7):
$(document).ready(function() {
var mqsmall = "(min-device-width:320px)";
var mqbig = "(min-device-width:960px)";
function imageresize() {
if(window.matchMedia(mqbig).matches) {
$('img[data-src-1260px]').each(function () {
$(this).attr('src',$(this).attr('data-src-1260px'));
});
}
else if(window.matchMedia(mqsmall).matches) {
$('img[data-src-960px]').each(function () {
$(this).attr('src',$(this).attr('data-src-960px'));
});
}
}
imageresize();
$(window).bind("resize", function() {
imageresize();
});
});
Juste pour être clair, je saisirais le chemin / le nom de l'image, dans le "SRC" ou ...?
L'image serait quelque chose comme 
.