2016-09-25 1 views
-4

Je suis en train de concevoir un site mobile, qui fonctionnerait parfaitement sur un écran 320x480. Le problème vient, car les téléphones plus récents n'utilisent plus cette taille et sont beaucoup plus gros. (Comme je l'ai découvert après que j'ai mis tous ces efforts et l'ai lu sur mon téléphone.) Je me demandais s'il y avait un moyen facile de faire grossir la taille que je voudrais donner sans aller de l'avant et tout donner une vue-largeur/vw ou vue-hauteur/vh. (Nvm, je me demande comment cela aurait un impact sur la taille de la police.)Comment rendre un site mobile ressemblant à celui de différentes résolutions d'écran

Ou devrais-je aller de l'avant et faire quelque chose de similaire? Cela pourrait être particulièrement mauvais si ce n'était pas adapté aux mobiles, pour diverses raisons impliquant sa création.)

+0

Bienvenue dans StackOverflow! Vous obtiendrez downvoted parce que votre question est assez vague. Ce que vous cherchez est appelé design web responsive. Il y a beaucoup d'informations si vous le google. Après avoir lu à ce sujet, vous pouvez revenir ici et publier votre code si vous avez des problèmes avec cela. Si vous le faites, veuillez également lire [** Comment créer un exemple minimal, complet et vérifiable **] (http://stackoverflow.com/help/mcve) et [** Comment poser une bonne question? **] (http://stackoverflow.com/help/how-to-ask). – Ricky

Répondre

1

this peut aider, c'est la raison pour laquelle nous utilisons le design responsive comme une solution aux différentes tailles d'écran. Ce qui suit est ajouté au <head> pour que le navigateur réponde à la taille de pixel/écran.

<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0"> 

également media queires sont utilisés pour modifier la conception en fonction de la largeur de l'écran, em est utilisé au lieu de px que px est absolue alors que em répondra en fonction du périphérique, vous pouvez lire plus here. Les pourcentages sont utilisés à la place des tailles absolues (si nécessaire), vous pouvez en lire plus sur ce here.

0

Utilisation de requêtes des médias, vous devriez vu quelque chose comme

@media(max-width:768px){.someClass{someCssStiling:xValue;}} 

Cela signifie que ces styles ne fonctionnent que sous 768px. Vous pouvez consulter la documentation sur les requêtes des médias ici (et dans beaucoup d'autres endroits, il y a beaucoup de doc sur Internet.):

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Je espère que ça aide!