2
votes

CSS Skill Bar Responsive

Je viens donc enfin d'intégrer des éléments de création de contenu dans mon premier site Web réactif pour mobile et ordinateur de bureau et j'aimerais savoir comment vous pouvez rendre une barre de compétences beaucoup plus lisible sur mobile. J'ai ce que j'aime dans la version de bureau, mais maintenant sur mobile, je veux que les barres remplissent l'écran de gauche à droite et rendent le texte toujours lisible sur les petits appareils.

Voici d'où j'ai obtenu le code. Ils n'ont aucune information sur la façon de rendre cette barre de compétences réactive. C'est donc mon objectif ici. w3schools

Voici ma version de bureau ressemble maintenant à

Mais quand je passe en mode Dev pour l'afficher au format iPhone, voici à quoi il ressemble

Voici ce que j'essayais de tenter:

<h2 align="center">My Skills</h2>

<div class="skillResponsive">
  <!--Div for Skill Bar-->

  <p style="padding-left: 200px;">HTML</p>
  <div class="container">
    <div class="skills html">90%</div>
  </div>

  <p style="padding-left: 200px;">CSS</p>
  <div class="container">
    <div class="skills css">80%</div>
  </div>

  <p style="padding-left: 200px;">JavaScript</p>
  <div class="container">
    <div class="skills js">65%</div>
  </div>

  <p style="padding-left: 200px;">PHP</p>
  <div class="container">
    <div class="skills php">60%</div>
  </div>

</div>
<!--End of div for Skill Bar-->

* {
  box-sizing: border-box
}

.container {
  width: 75%;
  background-color: #ddd;
  margin-left: 200px;
}

.skills {
  text-align: right;
  padding: 10px;
  color: white;
}

.html {
  width: 90%;
  background-color: #4CAF50;
}

.css {
  width: 80%;
  background-color: #2196F3;
}

.js {
  width: 65%;
  background-color: #f44336;
}

.php {
  width: 60%;
  background-color: #808080;
}

@media screen and (max-width: 768px) {
  .skillResponsive {
    width: 50%;
    text-align: justify;
  }
}

Alors, si vous pouviez me dire que puis-je faire pour que ma barre de compétences soit plus réactive lorsque vous redimensionnez le navigateur en mode tablette et mobile. Merci beaucoup!

Quelques lignes de codes sont un plus!

javascript html css media-queries responsive

3 commentaires

jetez un oeil ici s'il vous plaît; w3schools.com/howto/howto_css_skill_bar.asp

salut avez-vous essayé d'utiliser des requêtes multimédias?

juste parce que vous avez donné un remplissage en ligne .. mieux vaut donner un remplissage sur une requête multimédia

3 Réponses :

0
votes

Essayez ceci:

<div class="skill-set">
  <h1>My Skills</h1>
  <p>HTML</p>
  <div class="container">
    <div class="skills html">90%</div>
  </div>
  <p>CSS</p>
  <div class="container">
    <div class="skills css">80%</div>
  </div>
  <p>JavaScript</p>
  <div class="container">
    <div class="skills js">65%</div>
  </div>
  <p>PHP</p>
  <div class="container">
    <div class="skills php">60%</div>
  </div>
</div>

* {
  box-sizing: border-box
}
.skill-set {
  background-color: #ddd;
  margin-left: 20%;
  padding-left: 10%;
  width: 100%;
}
.container {
  width: 75%;
  background-color: #ddd;
}
.skills {
  text-align: right;
  padding: 10px;
  color: white;
}
.html {
  width: 90%;
  background-color: #4CAF50;
}
.css {
  width: 80%;
  background-color: #2196F3;
}
.js {
  width: 65%;
  background-color: #f44336;
}
.php {
  width: 60%;
  background-color: #808080;
}

0 commentaires

2
votes

Utilisez ce code .. il est entièrement réactif pour tous les appareils ... cela vous aidera. :)

  <h2 align="center">My Skills</h2>

  <div class="skillResponsive">
    <!--Div for Skill Bar-->
  
    <p>HTML</p>
    <div class="container">
      <div class="skills html">90%</div>
    </div>
  
    <p>CSS</p>
    <div class="container">
      <div class="skills css">80%</div>
    </div>
  
    <p>JavaScript</p>
    <div class="container">
      <div class="skills js">65%</div>
    </div>
  
    <p>PHP</p>
    <div class="container">
      <div class="skills php">60%</div>
    </div>
  
  </div>
  <!--End of div for Skill Bar-->

* {
  box-sizing: border-box
}

.skillResponsive {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 15px;
}

.container {
  background-color: #ddd;
}

.skills {
  text-align: right;
  padding: 10px;
  color: white;
}

.html {
  width: 90%;
  background-color: #4CAF50;
}

.css {
  width: 80%;
  background-color: #2196F3;
}

.js {
  width: 65%;
  background-color: #f44336;
}

.php {
  width: 60%;
  background-color: #808080;
}

1 commentaires

Hey, merci! C'est exactement ce que je recherche! J'ai utilisé le chrome à la place pour le mode de développement et il semble tellement plus propre sur mobile maintenant et aussi bien sur le bureau! Tu es l'homme!

0
votes

Premièrement, je suggère de désactiver la simulation tactile (c'est l'icône de la main bleue). Pour une raison quelconque dans Firefox avec cette fonctionnalité activée, la simulation ne fonctionne pas correctement.

Deuxièmement, concernant le code, je préfère toujours utiliser em / rem pour la taille de la police (au lieu de px) et vw / vh pour padding / margin / etc (au lieu de px). Il donne une longueur relative au lieu d'absolue. Vous pouvez trouver plus d'informations ci-dessous:

https: //www.w3schools. com / cssref / css_units.asp

Enfin, vous pouvez trouver le code tel que je l'utilisais.

<h2 align="center">My Skills</h2>

  <p class="title">HTML</p>
  <div class="container">
    <div class="skills html">90%</div>
  </div>

  <p class="title">CSS</p>
  <div class="container">
    <div class="skills css">80%</div>
  </div>

  <p class="title">JavaScript</p>
  <div class="container">
    <div class="skills js">65%</div>
  </div>

  <p class="title">PHP</p>
  <div class="container">
    <div class="skills php">60%</div>
  </div>

* {
  box-sizing: border-box
}

.container {
  width: 80%;
  background-color: #ddd;
  margin-left: 10vw;
}

.skills {
  text-align: right;
  padding: 0.5rem;
  color: white;
  font-size: 1rem;
}

.title
{
	padding-left: 10vw;
	font-size: 1rem;
}

.html {
  width: 90%;
  background-color: #4CAF50;
}

.css {
  width: 80%;
  background-color: #2196F3;
}

.js {
  width: 65%;
  background-color: #f44336;
}

.php {
  width: 60%;
  background-color: #808080;
}

@media only screen and (max-width: 812px) {
.skills {
     font-size: 1.5rem;
     }
.title {
     font-size: 1.2rem;
     }
}

0 commentaires