텍스트 아래의 텍스트가 반응합니다

어떻게하면 텍스트를 반응 적으로 할 수 있습니까? 서로 바탕 화면텍스트 아래의 텍스트가 반응합니다

-------------------------------- 
    12 0 12 15    | 
           | 
           | 
           | 
--------------------------------

에 예를 들어 내가 글꼴 크기가 현재 큰

------ 
    12 | 
    0 | 
    12 | 
    15 |

에있는 경우 내 텍스트 숫자를 responsive..my되지 않으며, 아래에 가고 모바일에서 원하는 있습니다 . 여기

내가 사용하고 코드입니다 :

.hasCountdown { 
    text-shadow: transparent 0px 1px 1px; 
    overflow: hidden; 
    padding: 30px; 
    /*cursor:pointer;*/ 
} 

.countdown_rtl { 
    direction: rtl; 
} 
.countdown_holding span { 
    background-color: #ccc; 
} 
.countdown_row { 
    clear: both; 
    width: 100%; 
    padding: 3px 2px; 
    text-align: center; 
} 


.countdown_show4 .countdown_section { 
    width: 24.5%; 
} 


.countdown_section { 
    display: block; 
    float: left; 

    text-align: center; 
    line-height: 200%; 
    margin:3px 0; 
    font-family:'halvetica_light'; 
} 
.countdown_amount { 
    font-size: 450%; 
} 


.countdown_amount_red 
{ 
    color:red; 
}

출처

2016-09-29 Aste1959

부트 스트랩 작업 중입니까? –

이 부분을 확인하십시오 https://stackoverflow.com/questions/39761791/bootstrap-responsive-table-within-displaytable/39761928#39761928 – SAM

HTML을 표시하지 않고도 당신이 얻게되는 것은 모두 추측입니다. –

당신은

html{ 
    font-size: 2vw; 
} 

h1{ 
    font-size: 1em; /*Change h1 or size to fit requirements */ 
}

출처

2016-09-29 08:07:43

가 this

에서 봐 (당신이 테스트를 위해 HTML을 공급하지 않은 것처럼) 단순히 아래 추가 시도 할 수

이것은 부트 스트랩 반응 형 디자인입니다. 링크 그리드 시스템을 읽으면 텍스트를 반응 적으로 만들 수 있습니다.

출처

2016-09-29 08:26:31 Mahan

불행히도 위의 설정을 사용하면 장치/창 크기를 고려하지 않아도 글꼴이 응답하지 않습니다. 접근 방법 (또는 적어도 내려 놓는 방법)은 전체 글꼴을 반응 적으로 만드는 요소로 글꼴을 사용합니다. 나는 강하게 얻을 모바일 첫 번째 방법을 사용하여 시작하는 것이 좋습니다, 그리고 Luke Wroblewski explained it quite well back in '09

당신이 주위에 도착 했더라면, 당신은 당신이 반응 타이포그래피을 달성 할 것을 깨닫고 시작합니다. 이를 달성하기 위해서는 여러 가지 솔루션이 필요하며 어떤 것이 가장 효과적인지 이해하고 더 복잡한 것을 추가하기 시작할 때 중단되지 않도록하려면 더 많은 읽기가 필요할 수 있습니다. 일부 아래

매우 빠른 설명과 (적어도 출발점으로) 당신의 독서의 즐거움에 대한 몇 가지 참고 물론,이 모든 솔루션은 너무 너무 무엇을 알고해야합니다, 미디어 쿼리를 사용

글꼴 크기 측정에는 % 또는 em을 사용하십시오. 찾고자하는 것이 가장 기본적이고 즉각적인 해결책입니다. IMO는 장기간 유지하기가 약간 어렵지만 간단한 위젯/구성 요소 (How to make your typography responsive)에서는 작동 할 수 있습니다. 단위 크기
사용 rems :이 조사 가치가하고
사용 vh 또는 vw 단위 크기로 뒤에 기본 개념 (Responsive typography with REMs: How to build a scalable typographic foundation in three steps)의 약간의 이해가 필요할 수 있습니다, 즉 뷰포트의 높이와 뷰포트의 폭은, 각기. (Viewport Sized Typography)

창의력을 발휘하고 이러한 방법을 조합하여 사용하면 가장 적합한 솔루션을 얻을 수 있습니다.

웹 타이포그래피에 대해 더 자세히 알고 싶다면 modular scale and vertical rhythm을 고려해 볼 수도 있습니다.하지만 그것은 또 다른 이야기입니다.

귀하의 문제를 해결하고 올바른 해결책을 선택하는 데 도움이되기를 바랍니다.

출처

2016-09-29 09:36:16

텍스트 아래의 텍스트가 반응합니다

답변

관련 문제