Javascript CSS技能栏

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

这是我从哪里得到代码的。他们没有任何关于如何使这个技能栏具有响应性的信息。这就是我的目标

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

但当我进入开发模式以iPhone格式查看它时，它就是这个样子

这就是我试图尝试的：

*{
框大小：边框框
}
.集装箱{
宽度：75%；
背景色：#ddd；
左边距：200px；
}
.技能{
文本对齐：右对齐；
填充：10px；
颜色：白色；
}
.html{
宽度：90%；
背景色：#4CAF50；
}
.css{
宽度：80%；
背景色：#2196F3；
}
.js{
宽度：65%；
背景色：#f44336；
}
.php{
宽度：60%；
背景色：#808080；
}
@媒体屏幕和屏幕（最大宽度：768px）{
.skillResponsive{
宽度：50%；
文本对齐：对齐；
}
}

我的技能
HTML

90%
CSS

80%
JavaScript

65%
PHP

60%

试试这个：

*{
框大小：边框框
}
.技能{
背景色：#ddd；
左缘：20%；
左：10%；
宽度：100%；
}
.集装箱{
宽度：75%；
背景色：#ddd；
}
.技能{
文本对齐：右对齐；
填充：10px；
颜色：白色；
}
.html{
宽度：90%；
背景色：#4CAF50；
}
.css{
宽度：80%；
背景色：#2196F3；
}
.js{
宽度：65%；
背景色：#f44336；
}
.php{
宽度：60%；
背景色：#808080；
}

我的技能
HTML

90%
CSS

80%
JavaScript

65%
PHP

60%

使用此代码。。它对所有设备都有充分的响应。。。这将对您有所帮助。：）

*{
框大小：边框框
}
.skillResponsive{
最大宽度：1000px；
保证金：0自动；
填充：0 15px；
}
.集装箱{
背景色：#ddd；
}
.技能{
文本对齐：右对齐；
填充：10px；
颜色：白色；
}
.html{
宽度：90%；
背景色：#4CAF50；
}
.css{
宽度：80%；
背景色：#2196F3；
}
.js{
宽度：65%；
背景色：#f44336；
}
.php{
宽度：60%；
背景色：#808080；
}

我的技能
HTML

90%
CSS

80%
JavaScript

65%
PHP

60%

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

其次，关于代码，我总是喜欢使用em/rem来表示字体大小（而不是px），使用vw/vh来表示填充/边距/etc（而不是px）。它给出的是相对长度而不是绝对长度。您可以在下面找到更多信息：

最后，您可以找到我将使用的代码

*{
框大小：边框框
}
.集装箱{
宽度：80%；
背景色：#ddd；
左边距：10vw；
}
.技能{
文本对齐：右对齐；
填充：0.5雷姆；
颜色：白色；
字号：1rem；
}
标题
{
左：10vw；
字号：1rem；
}
.html{
宽度：90%；
背景色：#4CAF50；
}
.css{
宽度：80%；
背景色：#2196F3；
}
.js{
宽度：65%；
背景色：#f44336；
}
.php{
宽度：60%；
背景色：#808080；
}
@仅介质屏幕和（最大宽度：812px）{
.技能{
字体大小：1.5rem；
}
.头衔{
字号：1.2rem；
}
}

我的技能
HTML
90%
CSS
80%
JavaScript
65%
PHP
60%

请看一下这里；您好，您尝试过使用媒体查询吗？仅仅因为您提供了内联填充。。最好在媒体查询中添加内容，谢谢！这正是我要找的！我用chrome代替开发模式，它现在在移动设备和桌面上看起来更干净！你就是那个人！