时间戳

首页 > 解决方案 > 根据分辨率缩放 Html 列表

html - 根据分辨率缩放 Html 列表

问题描述

我有一个<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>

标签： htmlcss

解决方案

我看到的唯一可行的选择是将此对象作为内联 SVG 元素并对其进行缩放。问题是它不会真正响应，它只会根据大小进行缩放，使得字体大小对于较小的屏幕来说非常小。

这里的问题是元素的旋转，因为如果你减小容器的大小，它就会完全不合适，而且你必须使用很多条件才能让它在远程接近所需的情况下工作。

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

这里的问题是它的元素太多，无法在手机中读取。您应该考虑为较小的屏幕使用替代布局。

推荐阅读