搜索

首页  >  问答  >  正文

尽管 css 相同,但 Reactjs SVG 图标大小不同

这是我第一次使用reactjs构建网站。 我一直在使用 React 图标库中的 ReactJS 图标。当这些图标在网站的同一部分重复时,其大小会有所不同。附上照片供您参考'。 我使用检查进行了检查。表明 对于较小的图标,它的路径为 9.97x9.97,但对于正常显示的图标,它的路径为 14x14。不确定路径意味着什么,我也不清楚为什么图标大小不同

JSX 代码是(示例)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

import React from 'react'

import './exp.css'

import { AiOutlineCheckCircle } from 'react-icons/ai'

 

const Exp = () => {

  return (

    <section id='exp'>

      <h5>Skills & Qualifications</h5>

      <h2>My Experience</h2>

      <div className="container exp__container">

        <div className="exp_english">

          <h3>English Literature</h3>

          <div className="exp__content">

            <article className='exp__details'><AiOutlineCheckCircle className='exp__details-icons'/>

              <div>

                <h4>Shakespearian Literature</h4>

              <small className='text-light'>Mastered</small>

              </div>

            </article>

            <article className='exp__details'><AiOutlineCheckCircle className='exp__details-icons'/>

              <div>

              <h4>American Literature</h4>

              <small className='text-light'>Mastered</small>

              </div>

            </article>

            <article className='exp__details'><AiOutlineCheckCircle className='exp__details-icons'/>

              <div>

              <h4>Oxford Grammer</h4>

              <small className='text-light'>Mastered</small>

              </div>

            </article>

            <article className='exp__details'><AiOutlineCheckCircle className='exp__details-icons'/>

             <div>

             <h4>Poetry Writing</h4>

              <small className='text-light'>Mastered</small>

             </div>

            </article>

            <article className='exp__details'><AiOutlineCheckCircle className='exp__details-icons'/>

              <div>

              <h4>Critical Analysis</h4>

              <small className='text-light'>Mastered</small>

              </div>

            </article>

          </div>

        </div>

         

 

{/* END OF ENGLISH LITERATURE */}

        <div className="exp_pyschology">

        <h3>Pyschology</h3>

          <div className="exp__content">

            <article className='exp__details'><AiOutlineCheckCircle className='exp__details-icons'/>

              <div>

              <h4>Counselling</h4>

              <small className='text-light'>Mastered</small>

              </div>

            </article>

            <article className='exp__details'><AiOutlineCheckCircle className='exp__details-icons'/>

              <div>

              <h4>Coaching</h4>

              <small className='text-light'>Mastered</small>

              </div>

            </article>

            <article className='exp__details'><AiOutlineCheckCircle className='exp__details-icons'/>

              <div>

              <h4>Research</h4>

              <small className='text-light'>Mastered</small>

              </div>

            </article>

            <article className='exp__details'><AiOutlineCheckCircle className='exp__details-icons'/>

              <div>

              <h4>Advisory</h4>

              <small className='text-light'>Mastered</small>

              </div>

            </article>

            <article className='exp__details'><AiOutlineCheckCircle className='exp__details-icons'/>

              <div>

              <h4>Teaching</h4>

              <small className='text-light'>Mastered</small>

              </div>

            </article>

          </div>

        </div>

      </div>

    </section >

  )

}

 

export default Exp

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

.exp__container {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap:2rem;

}

 

.exp__container > div {

    background-color: var(--color-blueish-pink);

    padding: 2.4rem 4rem;

    border-radius: 2rem;

    border: 1px solid transparent;

    transition: var(--transition);

 

}

 

.exp__container > div:hover {

    background-color: var(--color-bluegreen-transparent);

}

 

.exp__container > div h3 {

    text-align: center;

    margin-bottom: 2rem;

}

 

.exp__content {

    display: grid;

    grid-template-columns: 1fr 1fr;

    row-gap: 2rem;

}

 

.exp__details {

    display: flex;

    gap: 1rem;

}

 

.exp__details-icons {

    margin: 0.8rem;

    color: var(--color-gray);

    font-size: 1rem;

 

     

 

}

 

/* ================ MEDIA QUERIES (MEDIUM DEVICES) ============================== */

@media screen and (max-width:1024px) {

    .exp__container {

        grid-template-columns: 1fr;

    }

 

    .exp__container > div {

        width: 80%;

        padding:2rem;

        margin:0 auto;

    }

 

    .exp__content {

        padding:1rem;

    }

}

 

/* ================ MEDIA QUERIES (SMALL DEVICES) ============================== */

@media screen and (max-width:600px) {

    .exp__container {

        gap: 1rem;

    }

 

    .exp__container > div {

        width: 100%;

        padding: 2rem 1rem;

        margin:1rem;

    }

}

检查图像中的第一个图标,它看起来完全不同步

P粉184747536P粉184747536332 天前600

全部回复(1)我来回复

  • P粉447002127

    P粉4470021272024-04-02 11:47:14

    这是由 Flex 引起的。用 div 包裹图标或将 flex-shrink: 0 添加到 .exp__details-icons 类。

    1

    2

    3

    4

    5

    6

    7

    8

    9

    <article classname="exp__details">

        <div>

            <aioutlinecheckcircle classname="exp__details-icons">

        </aioutlinecheckcircle></div>

        <div>

            <h4>Shakespearian Literature</h4>

            <small classname="text-light">Mastered</small>

        </div>

    </article>

    回复
    0
  • 取消回复