如何减小引导带4中小屏幕的图标大小

Question

如何在引导4中减少小屏幕中的图标大小。我正在进行引导，我的目标是减少小屏幕引导中的图标大小。例如，我现在在屏幕大小的移动S-320 PX，这里我需要减少图标大小。请帮我解决这个问题。如果我不清楚自己的疑问，请发表评论。

我是Regform.js

import React, { Component } from 'react';
import './Regform.css';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSuitcase } from '@fortawesome/free-solid-svg-icons';


class Regform extends Component {
    render() {
        return (
            <div className='container-fluid customcolor'>
                <div className='row'>
                    <div className='col-12'>
                        <div className='Main'>
                            <div className='icon'>
                                <FontAwesomeIcon className='suitcasestyle fa-5x' icon={faSuitcase}></FontAwesomeIcon>
                            </div>
                            <div className='content'>
                                <h1>Job Application</h1>
                                <h3>Please complete the form below to apply for a position with us.</h3>
                            </div>
                            <div className='Mainform'>
                                <form>

                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

export default Regform

我是Regform.css

.Main {
    display: flex;
    padding-top: 2%;
    padding-bottom: 2%;
}

.customcolor {
    background-color: #ff3f00
}


.suitcasestyle {
    color: white;
}

.content {
    padding-left: 10px;
}

.content h1, h3 {
    color: white;
}

Answer 1

如字体--很棒的文档所述..。

图标继承父容器的字体大小，允许它们匹配您可能与它们一起使用的任何文本。使用以下类，我们可以增加或减小图标相对于继承字体大小的大小。

因此，只需使用@media查询来响应地缩小手机上的.icon字体大小。

@media (max-width: 320px) {
    .icon {
        font-size: .5rem;
    }
}

https://www.codeply.com/p/jnkKSowuAX

Answer 2

您可以使用.scss混合器来动态确定屏幕大小，并根据屏幕大小传递适当的图标。

基本上，scss会检测屏幕大小、视口、任何内容，并基于此提供一组css、字体，以及您想要的任何内容。