CSS 技能栏响应式

Question

所以我终于在我的第一个移动和桌面响应式网站中加入了一些内容创建内容，我想知道如何让技能栏在移动设备中更具可读性。我在桌面版中得到了我喜欢的东西，但现在在移动版中，我希望条形图从左到右填满屏幕，并使文本在小型设备上仍然可读。

这是我从中获取代码的地方。他们没有任何关于如何使此技能栏响应的信息。所以这就是我的目标。 w3schools

这就是我现在的桌面版本的样子

但是当我进入开发模式以 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

首先，我建议禁用触摸模拟（它是蓝色手形图标）。由于某种原因，在启用此功能的 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 2

使用此代码.. 它完全响应所有设备...这将对您有所帮助。 :)

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