Hauteur de la requête média CSS supérieure à la largeur et vice versa (ou comment imiter avec JavaScript)
La majorité de portables et de bureau écrans de nos jours, avoir une largeur supérieure à la hauteur. L'écran est "grand" non "de haut." Les téléphones intelligents ont fait quelque chose de plutôt cool, en permettant l'orientation du téléphone à influencer la manière dont le contenu est présenté.
J'aimerais le faire avec les media queries, de sorte que si quelqu'un sur un mac avec un moniteur de grande taille a la fenêtre de son navigateur de la taille de sorte qu'il est très "haut" (la hauteur est plus grande que la largeur), ils devraient voir un en-tête et pied de page. Mais si ils sont allés en plein écran ou "large" (la largeur est plus grande que la hauteur), il va voir une barre latérale sur la gauche et peut-être aussi le droit.
Je suis en train de tirer pleinement avantage des écrans larges, et des orientations. Comment faire avec les media queries ou javascript?
source d'informationauteur Costa
Vous devez vous connecter pour publier un commentaire.
Je suis sûr que vous avez maintenant, mais voici un exemple pour les autres qui passeront par là. Comme la personne précédente a dit, les gens devraient prendre le temps de lire ceci: http://www.w3.org/TR/css3-mediaqueries/
Maintenantici, est une réponse. Vous pouvez mettre "paysage" ou "portrait" en collaboration avec des largeurs et des hauteurs de votre @media règles. Cela suppose que la hauteur est plus grande que la largeur et vice versa. J'utilise habituellement min-width et puis avoir un peu de séparer les @media règles pour ceux spécifiquement. Un exemple serait le paysage: de défilement horizontale (de bureau) et portrait: régulier verticale (tablette/téléphone )
Ces 2 ne serait pas le faire seul, cependant, vous aurez besoin de quelques combinaisons. Je pense que nous pouvons assumer votre barre latérale serait un obstacle sur des écrans plus petits que 600px de large.
VOICI un jsfiddle - à noter que box-sizing: border-box; est utilisé pour le rembourrage des questions.
2017 mise à JOUR
Je pense que la plupart des gens utilisent flexbox maintenant: https://jsfiddle.net/sheriffderek/egxcgyyd/
Les Media Queries sont probablement va être votre solution ici pour les navigateurs qui le supportent. Vous pouvez récupérer une copie de la documentation à partir d'ici:
Mais vous pouvez trouver le tutoriel suivant utiles (Google: les Requêtes de Média Tutoriel):
Une fois que vous apprendre les rudiments de faire des choses comme le masquage des éléments si l'écran tombe en dessous d'une résolution spécifique:
Espère que cette aide.