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

试试这个：

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

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

首先，我建议禁用触摸模拟（它是蓝色的手形图标）。由于某些原因，在启用此功能的 Firefox 中，模拟无法正常工作。

其次，关于代码，我总是更喜欢使用 em/rem 字体大小（而不是 px）和 vw/vh 字体大小 padding/margin/etc（而不是 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>

CSS 技能栏响应

CSS Skill Bar Responsive

html

javascript

css

media-queries

responsive