文章/答案/技术大牛

发布

社区首页 >问答首页 >基于分辨率的Html列表缩放

问基于分辨率的Html列表缩放
EN

Stack Overflow用户

提问于 2020-02-18 18:32:22

回答 2查看 116关注 0票数 1

我有一个包含一系列元素的<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>

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-02-18 18:44:21

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

这里的问题是元素的旋转，因为如果您缩小容器的大小，它就会完全偏离位置，而且您必须使用许多条件才能使其工作甚至远接近所期望的。

您可以将图像作为向量，导出代码，只需操作文本项。在此之后，您只需将width: 100%; height: auto添加到svg元素中，它就符合其父元素。

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

票数 1

Stack Overflow用户

发布于 2020-02-18 18:45:28

在这种情况下，我发现最简单的解决方案是使用像rem这样的不同大小的单元。Rem是一个相对单元，它基于根字体大小，而不是父大小(如em )。因此，无论被定义为车身字体大小，都会影响所有的rem大小。

最酷的是，您还可以为width、height、padding、box-shadow、border等使用基于rem的大小。这意味着，当您更改基本大小时，使用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%}更改为可正确缩放的内容。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/60287358

复制

相似问题

问基于分辨率的Html列表缩放
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问基于分辨率的Html列表缩放EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问基于分辨率的Html列表缩放
EN