Comment ajuster automatiquement la taille de div pour tous les formats d'affichage mobile / tablette?
J'ai conçu une page où quatre balises div sont présentes dans la page. Si je teste la page sur un téléphone mobile (5 pouces), cela correspond parfaitement à la page. Si je teste la même page sur tablette, la page s'adapte à 30% de l'écran. Alors, comment puis-je définir la taille div afin qu’elle s’adapte à tous les types d’écrans.
HTML:
<div class="bubble0" align="center">
<h3>Three Levels </h3>
</div>
<div class="bubble" align="center"> </div><br/><br/>
<div class="bubble1" align="center"> </div><br/><br/>
<div class="bubble2" align="center"> </div><br/><br/>
<button>Play</button>
Des suggestions s'il vous plaît,
Cela s'appelle Développement Web réactif (RWD) . Pour que la page réponde à tous les appareils, nous devons utiliser certains principes fondamentaux tels que: -
1. Définissez la balise méta de la fenêtre d'affichage en tête:
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>
2.Utilisez requêtes avec les médias .
Exemple:-
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
3. Ou nous pouvons directement utiliser cadre RWD : -
Quelques bons articles
Requêtes sur les supports pour périphériques standard - PAR CHRIS COYIER
4. Requêtes de média Périphériques plus grands, Périphériques moyens et Petits périphériques. ( Travailler dans mes scénarios.)
Ci-dessous les requêtes de support pour le type de périphérique générique: - Périphérique plus grand, Périphériques moyens et Petits périphériques. Ceci est juste des types de média de base qui fonctionnent pour tous les scénarios et facile à manipuler le code au lieu d'utiliser diverses requêtes de média, il suffit de gérer trois types de média.
/*###Desktops, big landscape tablets and laptops(Large, Extra large)####*/
@media screen and (min-width: 1024px){
/*Style*/
}
/*###Tablet(medium)###*/
@media screen and (min-width : 768px) and (max-width : 1023px){
/*Style*/
}
/*### Smartphones (portrait and landscape)(small)### */
@media screen and (min-width : 0px) and (max-width : 767px){
/*Style*/
}
Votre question manque un peu de clarté quant à ce que vous voulez, mais à en juger par vos commentaires, je suppose que vous voulez chaque bulle couvrir l’écran verticalement et horizontalement. Dans ce cas, la partie verticale est la partie la plus délicate.
Comme beaucoup d'autres ont répondu, vous devez d'abord vous assurer que vous définissez la balise méta de la fenêtre d'affichage pour que les périphériques mobiles utilisent leur fenêtre d'affichage "idéale" au lieu de la fenêtre émulée "largeur du bureau". La version la plus simple et la plus simple de cette balise est la suivante:
<meta name="viewport" content="width=device-width, initial-scale=1">
Source: PPK, probablement le principal expert sur le fonctionnement de ce matériel. (Voir http://quirksmode.org/presentations/Spring2014/viewports_jqueryeu.pdf ).
Ce qui précède garantit essentiellement que les requêtes multimédia et les mesures CSS correspondent à l'affichage idéal d'un "point" virtuel sur un périphérique donné - au lieu de réduire les pages pour qu'elles fonctionnent avec des présentations de bureau non optimisées. Vous n'avez pas besoin de comprendre les détails, mais c'est important.
Maintenant que nous disposons d'une fenêtre d'affichage mobile correcte (non falsifiée), l'ajustement à la hauteur de la fenêtre reste un sujet délicat. En règle générale, les pages Web peuvent être agrandies verticalement, mais pas horizontalement. Alors, quand vous définissez height: 100% sur quelque chose, cette mesure doit se rapporter à autre chose. Au plus haut niveau, il s'agit de la taille de l'élément HTML. Mais lorsque l'élément HTML est plus haut que l'écran (et se dilate pour en contenir le contenu), vos mesures en pourcentages seront foutues.
Entrez l'unité vh: cela fonctionne comme des pourcentages, mais fonctionne par rapport à la fenêtre d'affichage, pas au bloc qui le contient. Page d'informations sur le MDN ici: https://developer.mozilla.org/en-US/docs/Web/CSS/length#Viewport-percentage_lengths
L'utilisation de cette unité fonctionne exactement comme prévu:
.bubble { height: 100vh; } /* be as tall as the viewport height. Done. */
Cela fonctionne sur beaucoup de navigateurs (IE9 et supérieur, Firefox moderne, Safari, Chrome, Opera etc.)) mais pas tous (informations de support ici: http://caniuse.com/# search = vh ). L’inconvénient dans les navigateurs où cela fonctionne est qu’il existe un énorme bogue dans iOS6-7 qui rend cette technique inutilisable dans ce cas précis (détails ici: https://github.com/scottjehl/Device-Bugs/issues/36 ). Ce problème sera toutefois résolu dans iOS8.
En fonction de la structure HTML de votre projet, vous pouvez vous en sortir en utilisant height: 100% sur chaque élément supposé être aussi haut que l'écran, pour autant que les conditions suivantes soient remplies:
- L'élément est un élément enfant direct de
<body>. - Les deux éléments
htmletbodyont une hauteur de 100%.
J'ai utilisé cette technique par le passé, mais c'était il y a longtemps et je ne suis pas sûr que cela fonctionne sur la plupart des appareils mobiles. Essayez et voyez.
Le choix suivant consiste à utiliser un assistant JavaScript pour redimensionner vos éléments en fonction de la fenêtre. Soit un polyfill qui résout les problèmes vh ou quelque chose d’autre. Malheureusement, toutes les mises en page ne sont pas réalisables en CSS.
Vous pouvez utiliser la hauteur de la fenêtre d'affichage, définissez simplement la hauteur de votre div sur height:100vh;, cela va régler la hauteur de votre div sur la hauteur de la fenêtre de visualisation de l'appareil. De plus, si vous voulez qu'elle soit identique à l'écran de votre appareil, définissez la marge et le remplissage à 0.
De plus, il serait judicieux de définir la balise méta de la fenêtre d'affichage:
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0" />
Notez que ceci est relativement nouveau et qu’il n’est pas pris en charge dans IE8-, consultez la liste de support avant d’envisager cette approche ( http://caniuse.com/#search=viewport ).
J'espère que cela t'aides.
Je n'ai pas beaucoup de temps et votre jsfidle ne fonctionnait pas pour le moment.
Mais peut-être que cela vous aidera à démarrer.
Tout d'abord, vous devriez éviter de mettre css dans vos balises HTML. Comme align="center".
Mettez des trucs comme ça dans vos css car ils sont beaucoup plus clairs et ne vont pas déprécier si vite.
Si vous voulez concevoir des mises en page réactives, vous devez utiliser des requêtes de média introduites dans css3 et déjà très bien supportées.
Exemple css:
@media screen and (min-width: 100px) and (max-width: 199px)
{
.button
{
width: 25px;
}
}
@media screen and (min-width: 200px) and (max-width: 299px)
{
.button
{
width: 50px;
}
}
Vous pouvez utiliser n'importe quel css que vous voulez dans une requête multimédia.
http://www.w3.org/TR/css3-mediaqueries/
J'utilise quelque chose comme ça dans mon document.ready
var height = $(window).height();//gets height from device
var width = $(window).width(); //gets width from device
$("#container").width(width+"px");
$("#container").height(height+"px");
violon
Vous voulez définir la hauteur qui peut définir pour tous les appareils?
Décidez de la conception du site, c'est-à-dire de la hauteur, sur divers appareils.
Ex:
Height-100pxpour les bulles sur le périphérique avec-min-width: 700px.Height-50pxpour les bulles sur le périphérique avec< 700px;
Avez votre css qui a une hauteur de 50px;
et ajouter cette requête média
@media only screen and (min-width: 700px) {
/* Styles */
.bubble {
height: 100px;
margin: 20px;
}
.bubble:after {
bottom: -50px;
border-width: 50px 50px 0;
}
.bubble:before {
top: 100px;
border-width: 52px 52px 0;
}
.bubble1 {
height: 100px;
margin: 20px;
}
.bubble1:after {
bottom: -50px;
border-width: 50px 50px 0;
}
.bubble1:before {
top: 100px;
border-width: 52px 52px 0;
}
.bubble2 {
height: 100px;
margin: 20px;
}
.bubble2:after {
bottom: -50px;
border-width: 50px 50px 0;
}
.bubble2:before {
top: 100px;
border-width: 52px 52px 0;
}
}
Vos bulles auront une hauteur de 100 pixels sur les périphériques supérieurs à 700 pixels et une marge de 20 pixels;
Pendant que je cherchais une réponse à la même question, j'ai trouvé ceci:
<img src="img.png" style=max-
width:100%;overflow:hidden;border:none;padding:0;margin:0 auto;display:block;" marginheight="0" marginwidth="0">
Vous pouvez l’utiliser dans une balise (iframe ou img) que l’image ajustera en fonction de son appareil.
Essayez de donner à vos divs une largeur de 100%.
Simple:
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0" />
À votre santé!