如何在Bootstrap 4中减小小屏幕上的图标大小

如何在引导程序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;
}


songxiayehu 回答:如何在Bootstrap 4中减小小屏幕上的图标大小

Font Awesome docs中所述。.

  

“图标继承了其父容器的字体大小,这使它们可以与您可能会使用的任何文本匹配。使用以下类,我们可以相对于继承的字体大小来增加或减小图标的大小。”

因此,只需使用@media查询来响应地缩小移动设备上的.icon字体大小。

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

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

,

您可以考虑使用.scss mixins,它可以动态确定屏幕尺寸并根据屏幕尺寸提供适当的图标。

基本上,scss会检测屏幕大小,视口等,并根据此结果提供一组css,字体,所需的字体。

本文链接:https://www.f2er.com/3128310.html

大家都在问