Масштаб 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

Я считаю, что самое простое решение в таком случае - использовать другую единицу измерения, например rem. Rem - это относительная единица измерения, основанная на размере шрифта root вместо родительского размера, например em. Таким образом, все, что определено как размер шрифта Body, будет влиять на все размеры rem.

Что круто, так это то, что вы также можете использовать размеры на основе rem для width, height, padding, box-shadow, border и так далее. Это означает, что при изменении базового размера ВСЕ, используя rem, изменят размеры единиц.

Типичная настройка выглядит следующим образом:

Это важно, чтобы получить легко понимаемый базовый размер

body {
  font-size: 62.5%;
  /* uses browser base size (16px) to make 1rem = 10px for easy math! */
}

Затем в вашем другом 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;
    }

.chart-skills::after {
      bottom: 1rem;
    }

    .chart-skills li {
      border-bottom-left-radius: 40rem;
      border-bottom-right-radius: 40rem;
      /* I might make the border radius 50% instead if that's easier */
    }

Затем в медиа-запросе просто измените body{ font-size: xx%} на что-то, что правильно масштабируется.

Answer 2

Единственный возможный вариант для этого - сделать этот объект встроенным элементом SVG и просто масштабировать его. Проблема в том, что он не будет действительно отзывчивым, он просто масштабируется с точки зрения размера, делая размер шрифта очень маленьким для небольших экранов.

Проблема здесь заключается в повороте элементов, потому что если вы уменьшите размер контейнера, который становится совершенно неуместным, и вам придется использовать множество условий, чтобы он работал даже удаленно близко к желаемому.

Вы можете сделать изображение как вектор, экспортировать код и просто манипулировать текстовыми элементами. После этого вы просто добавляете width: 100%; height: auto к элементу svg, и он соответствует его родительскому элементу.

Проблема здесь в том, что у него слишком много элементов, чтобы его можно было прочитать в мобильном телефоне. Вы должны рассмотреть возможность использования альтернативного макета для небольших экранов.