web-dev-qa-db-fra.com

Le moyen le plus rapide de rendre le site Web réactif?

J'ai déjà utilisé Zurb Foundation et Skeleton, je connais donc les deux, mais je n'avais jamais eu à convertir un site Web existant en site Web réactif auparavant. Quelle est la méthode la plus rapide pour convertir mon site web? Vous utilisez un framework comme ci-dessus ou vous ajoutez des requêtes multimédia pour le code déjà fourni? (Ça marche même?)

csshtml5css3responsive-designmedia-queries
16
Joe Bobby

Déterminez les périphériques que vous souhaitez prendre en charge, puis ajoutez une feuille de style contenant les éléments suivants:

/* =Responsive Structure
----------------------------------------------- */
@media (max-width: 800px) {
       /* Smaller Resolution Desktops and Laptops */
       [...]
}
@media (max-width: 650px) {
       /* Smaller devices */
       [...]
}
@media (max-width: 450px) {
       /* Even Smaller devices */
       [...]
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
       /* Even Smaller devices */
       [...]
}

Il est plus facile de tester si elles vont dans l'ordre décroissant. plus d'exemples de requêtes de médias ici:

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

29
Matthew Darnell

Dans mon cas, j'ai besoin de ré-écrire le site Web à partir de zéro parce que mon fichier de style réactif n'a pas résolu le problème .. Donc, je réécris mes styles avec MOINS et je crée une feuille de style réactif avec les requêtes de média correctes comme Matthew Darnell faire.

Je ne connais pas Skeleton, mais Twitter Boostrap fonctionne bien pour moi.

3
Full-Stack Software Engineer

Si vous êtes prêt à faire un peu de travail intellectuel et de migration, il existe un moyen d'installer Foundation sur un projet existant (en particulier les projets Compass).

Vous devez d’abord installer la boussole et transformer le projet en projet boussole. Un moyen simple de le faire consiste à utiliser le kit de code et à glisser votre dossier de projet dans le kit de code. Vous pouvez obtenir des indications sur le terminal via cette page sur le site Web de la fondation. 

http://foundation.zurb.com/docs/sass.html

Vous devez ensuite ouvrir le terminal et taper

cd /path-to-your-project-folder/

puis tapez 

compass install -r zurb-foundation foundation

Vous pouvez essayer d’utiliser Foundation uniquement sur une application existante en utilisant complètement sass (pas de boussole), mais vous devrez télécharger Foundation à partir du site git et inclure le scss @ un par un. Vous pouvez trouver des informations dans la page que j'ai énumérée ci-dessus.

0
user2533956