CSS Skill Bar Отзывчивый

Question

Итак, я наконец-то получил кое-что по созданию контента на своем первом адаптивном веб-сайте для мобильных устройств и настольных компьютеров, и мне хотелось бы знать, как сделать панель навыков более читабельной в мобильных устройствах.Я получил то, что мне нравится в настольной версии, но теперь в мобильном я хочу, чтобы полосы заполняли экран слева направо и чтобы текст оставался читаемым на небольших устройствах.

Вот откуда я взял код.У них нет никакой информации о том, как сделать эту панель навыков отзывчивой.Так что это моя цель здесь. w3schools

Вот как сейчас выглядит моя настольная версия

Но когда я вхожу в Devрежим для просмотра в формате iPhone, вот как это выглядит

Это то, что я пытался попробовать:

* {
  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;
  }
}

<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-->

Так что, если бы вы могли сказать мне, что я могу сделать, чтобы моя панель умений стала более отзывчивой, когда вы изменяете размер браузера до планшета и мобильного режима.Это будет здорово, спасибо!

Несколько строк кода - это плюс!

Answer 1

Используйте этот код ... он полностью адаптивен для всех устройств ... это поможет вам.:)

* {
  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;
}

  <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-->

Answer 2

Во-первых, я предлагаю отключить сенсорное моделирование (это синий значок руки).По какой-то причине в Firefox с этой функцией симуляция работает неправильно.

Во-вторых, что касается кода, я всегда предпочитаю использовать em / rem для размера шрифта (вместо px) и vw / vh для заполнения /поле / и т. д. (вместо px).Это дает относительную длину вместо абсолютной.Вы можете найти дополнительную информацию ниже:

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

Наконец, вы можете найти код так, как я бы его использовал.

* {
  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;
     }
}

<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>

Answer 3

Попробуйте:

* {
  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;
}

<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>