J'utilise semantic-ui-react pour mon site Web. Je veux rendre tous les composants compatibles avec les mobiles. Mais quand je regarde le site Web sur mobile, tous les éléments sont rendus très petits. Veuillez trouver l'image ci-dessous:
Comment puis-je agrandir les éléments sur un mobile? Aussi, je veux un menu réactif pour la version mobile. Quelqu'un pourrait-il me le faire savoir?
Merci
3 Réponses :
Avez-vous déjà cette balise Meta dans votre html? Je pense qu'il manque juste ça.
Assurez-vous d'avoir la balise meta appropriée dans votre HTML entre et, bien sûr, faites référence au CSS (l'importation dans js est également très bien) :
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.1/dist/semantic.min.css" />
Oui, j'ai ajouté cette ligne. Mais les composants semblent encore plus petits. Ils prennent toute la largeur, mais la hauteur de l'élément d'entrée et la taille de la police sont très petites. Je ne peux même pas le lire.
Je l'ai ajouté entre les balises
. . J'essaye de l'inclure dans react ssr d'ailleurs.Pouvez-vous partager un exemple via un extrait de code ou un lien vers un sandbox en ligne ?
Merci à Laurens Deprost pour l'aide!
J'ai résolu ce problème. Il y avait en fait 2 problèmes.
La première était que j'utilisais le transfert de domaine de godaddy avec le masquage activé. En raison de ce site entier a été affiché dans un jeu de cadres et les requêtes multimédias ne fonctionnaient pas. Pour résoudre ce problème, j'ai ajouté un domaine personnalisé dans Heroku et l'ai utilisé comme enregistrement CNAME dans godaddy.
Ensuite, j'ai également appliqué le CSS avec des requêtes multimédias à partir d'ici: https://gist.github.com/phuphighter/ce980aaec1c7104846f7e944743a7e
Avec ces deux correctifs en place, le site fonctionne correctement.
Merci