基于解析度的音阶HTML列表

Question

我有一个<ul>，其中包含一系列元素，它们使用CSS格式化，因此形成了一个半甜甜圈图。我想使它适合移动设备使用，以便内容随屏幕缩放。

我尝试使用媒体查询来更改元素的宽度和高度，以及边框半径的大小，但均未成功。

    
    body {
      font: normal 16px/1.5 'Roboto', sans-serif;
      padding: 130px 0 0 0;
      background: #f1f1f1;
    }
    
    /* RESET STYLES
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
    
    .chart-skills {
      margin: 0 auto;
      padding: 0;
      list-style-type: none;
    overflow: hidden;
    }
    
    .chart-skills *,
    .chart-skills::before {
      box-sizing: border-box;
    }
    
    /* CHART-SKILLS STYLES
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
    
    .chart-skills {
      position: relative;
      width: 800px;
      height: 400px;
    }
    
    .chart-skills::before,
    .chart-skills::after {
      position: absolute;
    }
    
    .chart-skills::before {
      content: '';
      width: inherit;
      height: inherit;
      border: 45px solid rgba(211, 211, 211, .3);
      border-bottom: none;
      border-top-left-radius: 400px;
      border-top-right-radius: 400px;
    }
    
    .chart-skills::after {
      content: 'Low to High Risk';
      left: 50%;
      bottom: 10px;
      transform: translateX(-50%);
      font-size: 1.1rem;
      font-weight: bold;
      color: #009933;
    }
    
    .chart-skills li {
      position: absolute;
      top: 100%;
      left: 0;
      width: inherit;
      height: inherit;
      border: 45px solid;
      border-top: none;
      border-bottom-left-radius: 400px;
      border-bottom-right-radius: 400px;
      transform-origin: 50% 0;
    animation-fill-mode: forwards;
    animation-duration: .1s;
    animation-timing-function: linear;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    }
    
    
    .chart-skills li:nth-child(1) {
      z-index: 19;
      border-color: #00FF00;
      animation-name: rotate-1;
    
    }
    
    .chart-skills li:nth-child(2) {
      z-index: 18;
      border-color: #24FF00;
      animation-name: rotate-2;
      animation-delay: .1s;
    
    }
    
    .chart-skills li:nth-child(3) {
      z-index: 17;
      border-color: #47FF00;
      animation-name: rotate-3;
      animation-delay: .2s;
    }
    
    .chart-skills li:nth-child(4) {
      z-index: 16;
      border-color: #58FF00;
      animation-name: rotate-4;
      animation-delay: .3s;
    
    }
    
    .chart-skills li:nth-child(5) {
      z-index: 15;
      border-color: #6AFF00;
      animation-name: rotate-5;
      animation-delay: .4s;
    }
    
    .chart-skills li:nth-child(6) {
      z-index: 14;
      border-color: #8DFF00;
      animation-name: rotate-6;
      animation-delay: .6s;
    
    }
    
    .chart-skills li:nth-child(7) {
      z-index: 13;
      border-color: #B0FF00;
      animation-name: rotate-7;
      animation-delay: .7s;
    
    }
    
    .chart-skills li:nth-child(8) {
      z-index: 12;
      border-color: #D4FF00;
      animation-name: rotate-8;
      animation-delay: .8s;
    
    }
    
    .chart-skills li:nth-child(9) {
      z-index: 11;
      border-color: #F7FF00;
      animation-name: rotate-9;
      animation-delay: .9s;
    
    }
    
    .chart-skills li:nth-child(10) {
      z-index: 10;
      border-color: #FFF600;
      animation-name: rotate-10;
      animation-delay: 1s;
    
    }
    
    .chart-skills li:nth-child(11) {
      z-index: 9;
      border-color: #FFE400;
      animation-name: rotate-11;
      animation-delay: 1.1s;
    
    }
    
    .chart-skills li:nth-child(12) {
      z-index: 8;
      border-color: #FFD300;
      animation-name: rotate-12;
      animation-delay: 1.2s;
    
    }
    
    .chart-skills li:nth-child(13) {
      z-index: 7;
      border-color: #FFAF00;
      animation-name: rotate-13;
      animation-delay: 1.3s;
    
    }
    
    .chart-skills li:nth-child(14) {
      z-index: 6;
      border-color: #FF8C00;
      animation-name: rotate-14;
      animation-delay: 1.4s;
    
    }
    
    .chart-skills li:nth-child(15) {
      z-index: 5;
      border-color: #FF6900;
      animation-name: rotate-15;
      animation-delay: 1.5s;
    
    }
    
    .chart-skills li:nth-child(16) {
      z-index: 4;
      border-color: #FF4600;
      animation-name: rotate-16;
      animation-delay: 1.6s;
    }
    
    .chart-skills li:nth-child(17) {
      z-index: 3;
      border-color: #FF2300;
      animation-name: rotate-17;
      animation-delay: 1.7s;
    }
    .chart-skills li:nth-child(18) {
      z-index: 2;
      border-color: #FF1100;
      animation-name: rotate-18;
      animation-delay: 1.8s;
    }
    
    .chart-skills li:nth-child(19) {
      z-index: 1;
      border-color: #FF0000;
      animation-name: rotate-19;
      animation-delay: 1.9s;
    }
    
    
    /*----------------------------------------------------------------------------------------------------------------------------------*/
    @keyframes rotate-1{
      100% {
        transform: rotate(9.5deg);
      }
    }
     
    @keyframes rotate-2{
      0% {
        transform: rotate(9.5deg);
      }
      100% {
        transform: rotate(19deg);
      }
    }
     
    @keyframes rotate-3{
      0% {
        transform: rotate(19deg);
      }
      100% {
        transform: rotate(28.5deg);
      }
    }
     
    @keyframes rotate-4{
      0% {
        transform: rotate(28.5deg);
      }
      100% {
        transform: rotate(38deg);
      }
    }
    @keyframes rotate-5{
      0% {
        transform: rotate(38deg);
      }
      100% {
        transform: rotate(47.5deg);
      }
    }
    
    @keyframes rotate-6{
      0% {
        transform: rotate(47.5deg);
      }
      100% {
        transform: rotate(57deg);
      }
    }
    
    @keyframes rotate-7{
      0% {
        transform: rotate(57deg);
      }
      100% {
        transform: rotate(66.5deg);
      }
    }
    
    @keyframes rotate-8{
      0% {
        transform: rotate(66.5deg);
      }
      100% {
        transform: rotate(76deg);
      }
    }
    
    @keyframes rotate-9{
      0% {
        transform: rotate(76deg);
      }
      100% {
        transform: rotate(85.5deg);
      }
    }
    
    @keyframes rotate-10{
      0% {
        transform: rotate(85.5deg);
      }
      100% {
        transform: rotate(95deg);
      }
    }
    
    @keyframes rotate-11{
      0% {
        transform: rotate(95deg);
      }
      100% {
        transform: rotate(104.5deg);
      }
    }
    
    @keyframes rotate-12{
      0% {
        transform: rotate(104.5deg);
      }
      100% {
        transform: rotate(114deg);
      }
    }
    
    @keyframes rotate-13{
      0% {
        transform: rotate(114deg);
      }
      100% {
        transform: rotate(123.5deg);
      }
    }
    
    @keyframes rotate-14{
      0% {
        transform: rotate(123.5deg);
      }
      100% {
        transform: rotate(133deg);
      }
    }
    
    @keyframes rotate-15{
      0% {
        transform: rotate(133deg);
      }
      100% {
        transform: rotate(142.5deg);
      }
    }
    
    @keyframes rotate-16{
      0% {
        transform: rotate(142.5deg);
      }
      100% {
        transform: rotate(152deg);
      }
    }
    
    @keyframes rotate-17{
      0% {
        transform: rotate(152deg);
      }
      100% {
        transform: rotate(161.5deg);
      }
    }
    
    @keyframes rotate-18{
      0% {
        transform: rotate(161.5deg);
      }
      100% {
        transform: rotate(171deg);
      }
    }
    
    @keyframes rotate-19{
      0% {
        transform: rotate(171deg);
      }
      100% {
        transform: rotate(180deg);
      }
    }
    
    
    
    .chart-skills span {
      position: absolute;
      font-size: .85rem;
    }
    
    
    /*-------------------------------------------------------------------------------------------------------------------*/
    .chart-skills li:nth-child(1) span {
      top: 20px;
      left: 10px;
      transform: rotate(-9.5deg);
    }
     
    .chart-skills li:nth-child(2) span {
      top: -5px;
      left: 2px;
      transform: rotate(-19deg);
    }
     
    .chart-skills li:nth-child(3) span {
      top: 10px;
      left: 0px;
      transform: rotate(-28.5deg);
    }
     
    .chart-skills li:nth-child(4) span {
      top: 60px;
      left: 10px;
      transform: rotate(-38deg);
    }
    
    .chart-skills li:nth-child(5) span {
      top: 45px;
      left: 0px;
      transform: rotate(-47.5deg);
    }
    
    .chart-skills li:nth-child(6) span {
      top: 50px;
      left:  0px;
      transform: rotate(-57deg);
    }
    
    .chart-skills li:nth-child(7) span {
      top: 55px;
      left: -5px;
      transform: rotate(-66.5deg);
    }
    
    .chart-skills li:nth-child(8) span {
      top: 5px;
      left: -10px;
      transform: rotate(-76deg);
    }
    
    .chart-skills li:nth-child(9) span {
      top: 105px;
      left: 5px;
      transform: rotate(-85.5deg);
    }
    
    .chart-skills li:nth-child(10) span {
      top: 15px;
      left: -35px;
      transform: rotate(-95deg);
    }
    
    .chart-skills li:nth-child(11) span {
      top: -25px;
      left: -25px;
      transform: rotate(-104.5deg);
    }
    
    .chart-skills li:nth-child(12) span {
      top: -40px;
      left: -10px;
      transform: rotate(-114deg);
    }
    
    .chart-skills li:nth-child(13) span {
      top: -75px;
      left: 10px;
      transform: rotate(-123.5deg);
    }
    
    .chart-skills li:nth-child(14) span {
      top: 35px;
      left: -5px;
      transform: rotate(-133deg);
    }
    .chart-skills li:nth-child(15) span {
      top: -25px;
      left: -5px;
      transform: rotate(-142.5deg);
    }
    
    .chart-skills li:nth-child(16) span {
      top: -15px;
      left: 10px;
      transform: rotate(-152deg);
    }
    
    .chart-skills li:nth-child(17) span {
      top: -10px;
      left: 10px;
      transform: rotate(-161.5deg);
    }
    
    .chart-skills li:nth-child(18) span {
      top: 0px;
      left: 10px;
      transform: rotate(-171deg);
    }
    
    .chart-skills li:nth-child(19) span {
      top: 10px;
      left: 10px;
      transform: rotate(-180deg);
    }
    @keyframes fade-in {
      0%,
      90% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }

    <ul class="chart-skills">
      <li><span>US savings bonds</span></li>
      <li><span>Savings accounts, money market accounts and CDs</span></li>
      <li><span>US Treasury bills, notes and bonds</span></li>
      <li><span>Annuities</span></li>
      <li><span>Money market funds</span></li>
      <li><span>Municipal bonds</span></li>
      <li><span>Corporate bonds</span></li>
      <li><span>High-yield</span></li>
      <li><span>REITs and MLPs</span></li>
      <li><span>Rental real estate</span></li>
      <li><span>Preferred stock</span></li>
      <li><span>Index funds</span></li>
      <li><span>Mutual funds</span></li>
      <li><span>Large-cap stocks</span></li>
      <li><span>Mid-cap stocks</span></li>
      <li><span>Small-cap stocks</span></li>
      <li><span>Commodities</span></li>
      <li><span>Options</span></li>
      <li><span>Futures</span></li>
    </ul>

Answer 1

我为此看到的唯一可行的选择是使该对象成为嵌入式SVG元素并对其进行缩放。问题是它不会真正响应，只会按大小缩放，从而使较小屏幕的字体变小。

这里的问题是元素的旋转，因为如果减小容器的尺寸，容器将完全移位，并且必须使用很多条件才能使其甚至在接近所需位置的情况下工作。

您可以将图像制作为矢量，导出代码并仅处理文本项。之后，只需将width: 100%; height: auto添加到svg元素，它就适合其父元素。

这里的问题是，手机中有太多元素无法读取。对于较小的屏幕，您应该考虑使用其他布局。

Answer 2

我发现在这种情况下最简单的解决方案是使用不同的大小调整单元，例如rem。 Rem是基于root字体大小的动态百分比。因此，任何定义为“正文”字体大小的内容都会影响所有大小。

您还可以为width，height，padding，box-shadow，border等使用基于rem的尺寸。这意味着当您更改基本大小时，使用rem单位进行的所有更改都会调整大小。

典型的设置如下：

这对于获得易于理解的基本大小很重要

body {
  font-size: 62.5%;
  /* uses browser base size to make 1rem = 10px */
}

然后在您的其他CSS中更改您要缩放以基于rem的所有内容。 （我在这里简化了很多）

.chart-skills {

      width: 80rem;
      height: 40rem;
    }
.chart-skills::before {
      border: 4.5rem solid rgba(211, 211, 211, .3);
      border-top-left-radius: 40rem;
      border-top-right-radius: 40rem;
    }

...

然后在媒体查询中只需将body{ font-size: xx%}更改为可以正确缩放的内容。