Media Queries

Djokx
Les bases HTML/CSS

Bonjour à tous,
J'ai suivi le tutoriel sur les Media Querie, que j'ai soit dit en passant trouvé très intéressant.
J'ai donc réussis à faire quelque chose qui commence à prendre forme mais je ne sais pas trop comment m'y prendre pour adapter le texte. C'est à dire qu'il faut faire un zoom pour pouvoir lire.
Vous pouvez voir le résultat sur cette page : http://www.piroxbots.fr/
Cela est peut-être dû aux images de grande taille.

Merci d'avance pour votre aide,
Djokx.

7 réponses

PaulB319
Réponse acceptée

Je ne pense pas qu'il y ai des sélecteurs CSS pour les images. Il faudrait le faire en JS, par exemple :

jQuery(function(){
    if($('img').height()<500){
        $(this).css({
            'height' : 500
        });
    }
});

Tu peux peut-être aussi utiliser du JS pour tester la plateforme et augmenter la taille du texte en fonction.

En espérant t'avoir aidé, Paul9.

Swatto
Réponse acceptée

Généralement, ça règle les soucis de texte qui apparaissent trop petit sur mobile.
A simplement mettre dans ton <head>.

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
Swatto
Réponse acceptée

Je pense sans certitude qu'il manque les parenthèses après ton width. Si jamais, ça ne fonctionne pas, alors c'est qu'une boucle sera nécessaire.
Je me permet aussi de te conseiller de mettre des classes à tes images sinon, tu va t'y perdre !

jQuery(function(){

    if ($("img").width() > 150) {
        $("img").addClass("grandeImage");
    }

});
PaulB319

Tu peux placer tous les textes dont tu veux augmenter la taille dans des paragraphes qui auront une classe particulière, que tu stylisera après.

Djokx
Auteur

Bonjour et merci pour ta réponse.
J'ai donc essayé en appliquant une font-size de 100%, le résultat est satisfaisant en testant sur le PC mais dès que je passe sur iPhone le résultat n'a que très peu changé. Alors que depuis le début l'affichage se fait parfaitement sur BlackBerry. Je ne comprend pas trop là.

PS: Existe-t-il des sélecteurs CSS pour ne cibler que des images plus larges que XXX pixels ?

Merci d'avance,
Cordialement,
Djokx.

Djokx
Auteur

Merci à vous deux, ça m'a bien aider. (@Swatto, ta ligne résout 90% des mes problèmes ! :) )

(On est plus dans du HTML/CSS, désolé d'être dans la mauvaise catégorie)
J'ai donc essayer code code JS, merci Paul9 mais je voulais m'en servir pour ajouter une classe.
Je m'y connait à peine en JS et mon code ne fonctionne donc pas :

jQuery(function(){
 
    if ($("img").width > 150) {
        $("img").addClass("grandeImage");
    }
 
});

Merci d’avance.
Cordialement,
Djokx.

Djokx
Auteur

En effet, le problème venait bien des parenthèses.
Encore merci à vous !

Cordialement,
Djokx.