>

CSS에서 헤더 바 (header-top-container)에 적용하고있는 클래스에서 작업하고 싶습니다. 화면 크기에 따라 헤더의 h1 텍스트 크기가 최대로 동적으로 조정됩니다 28px의 크기. 테스트 할 때 창을 크게 만들면 텍스트 크기가 계속 커집니다.


.header-top-container {
    background: rgb(242,246,248);
    background: -moz-linear-gradient(180deg, rgba(242,246,248,1) 0%, rgba(222,230,235,1) 51%, rgba(224,239,249,1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(242,246,248,1) 0%, rgba(222,230,235,1) 51%, rgba(224,239,249,1) 100%);
    background: linear-gradient(180deg, rgba(242,246,248,1) 0%, rgba(222,230,235,1) 51%, rgba(224,239,249,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f2f6f8",endColorstr="#e0eff9",GradientType=1);
    padding: 10px;
    text-align: center;
    color:#05336b;
}
.header-top-container h1{
    margin-top:0;
    margin-bottom: 0;
    color: #05336b;
    line-height: .5;
    font-weight: 600;
    font-variant: small-caps;
    font-size: calc(14px + (28 - 14) * ((100vw - 300px)/(1600 - 300))); 
} ```
``` HTML
<div class="header-top-container">
        <div class="w3-mobile w3-content">
            <h1> 
                <img src="<?PHP echo SYS_URL;?>resources/logo/bc_ote_scfe_PMS288.png"  alt="Baruch College Office of Testing and Evaluation: Student Course and Facutly Evaluation Logo" class="header-main-logo" /> 
                <br>
                <span id="header-Logo_PageName_lg">5t3<?PHP echo $page_title;?> </span> 
            </h1>
        </div>
</div>

예상되는 출력은 글꼴이 28px보다 크지 않습니다

  • 답변 # 1

    최소 및 최대 값으로 반응 형 타이포그래피를 만들려면 계산 및 미디어 쿼리 조합을 사용해야합니다. 아래는 600px에서 최소 글꼴 크기가 12px이고 1000px 이상에서 최대 20px 인 예입니다.

    :root {
      font-size: 12px;
    }
    @media screen and (min-width: 600px) {
      :root {
        font-size: calc(  12px + (20 - 12) *  ( (100vw - 600px) / (1000 - 600) ) );
      }
    }
    @media screen and (min-width: 1000px) {
      :root {
        font-size: 20px;
      }
    }
    
    

    다음은 반응 형 텍스트에 대한 자세한 내용을 위해 몇 년 전에 만든 펜입니다 (타입 스케일도 사용). https://codepen.io/WebNesting/pen/gwyvYg

    따라서 숫자는 다음과 같습니다.

    .header-top-container h1 {
        font-size: 14px;
    }
    @media screen and (min-width: 300px) {
      .header-top-container h1 {
        font-size: calc(14px + (28 - 14) *  ((100vw - 300px) / (1600 - 300)));
      }
    }
    /* WITHOUT THE BLOCK BELOW, THE FONT WOULD CONTINUE TO GROW */
    @media screen and (min-width: 1600px) {
      .header-top-container h1 {
        font-size: 28px;
      }
    }
    
    
    

  • 이전 IdentityServer4는 인증을 위해 Aspnet 45 MVC5 SimpleMembership을 대체합니다
  • 다음 (자바 스크립트 및 HTML) 한 목록에서 다른 목록으로 항목 이동