amir jafari
2 سال پیش توسط amir jafari مطرح شد
1 پاسخ

ریسپانسیو کردن یک عنصر با سایز px

سلام یک نمودار دایره ای دارم که از پایگاه اطلاعاتی عدد میگیره و به شکل نمودار دایره ای نشان میده
سایز آن را بر اساس پیکسل تنظیم کردم
اگر بخواهم به صورت ریسپانسیو دربیارم
باید چکار کنم
اگر چنین کاری امکانش نیست راهنماییم کنید دقیقا باید چکار کنم که واکنشگرا باشد
کدها:

<style>
  @property --p{
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
.pie {
  --p:<?php
        $sql="SELECT *from adminpost";
                $result=mysqli_query($conn,$sql);
                $row=mysqli_num_rows($result);
                echo $row;
      ?>;
  --b:16px;
  --c:#9e36ff;
  --w:150px;

  width:var(--w);
  aspect-ratio:1;
  position:relative;
  display:inline-grid;
  margin:5px;
  place-content:center;
  font-size:25px;
  font-weight:bold;
  font-family:sans-serif;

      background-color: white;
    border-radius: 100%;
    border: black;
    color: white;;

  background: red;
  transition: width 2s, height 4s;
}
.pie:before,
.pie:after {
  content:"";
  position:absolute;
  border-radius:50%;
}
.pie:before {
  inset:0;
  background:
    radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat,
    conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
          mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
}
.pie:after {
  inset:calc(50% - var(--b)/2);
  background:var(--c);
  transform:rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2));
}
.animate {
  animation:p 1s .5s both;
}
.no-round:before {
  background-size:0 0,auto;
}
.no-round:after {
  content:none;
}
@keyframes p {
  from{--p:0}
}
        .int-chart{
            background-color: #282828;
            border-radius: 100%;
            width: 119px;
            height: 119px;
            text-align: center;
             line-height: 110px;
        }
.pie{
    animation-name: ipo;
    animation-duration: 1.5s;
    animation-fill-mode: backwards;
}
@keyframes ipo{
    0%{
   --p: 0;
    }
    100%{
    --p:<?php
                $sql="SELECT *from adminpost";
                $result=mysqli_query($conn,$sql);
                $row=mysqli_num_rows($result);
                echo $row;
            ?>;

    }
        }
                <div class="pie" style="">
                            <div class="int-chart">
                            <?php
                $sql="SELECT *from adminpost";
                $result=mysqli_query($conn,$sql);
                $row=mysqli_num_rows($result);
                echo $row;
            ?>
                                </div>
                        </div>

ثبت پرسش جدید
رایموند
تخصص : مختصص وردپرس - برنامه نویس لار...
@Raymond 2 سال پیش مطرح شد
0

درود خوبی...
برای رسپانسیو کردن یک المان یا عنصر از مدیا کوئری CSS یا گرید بوت استرپ استفاده کنید.
پیوند های زیر:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
https://getbootstrap.com/docs/5.2/layout/grid/


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام