@media 폭과 글꼴 크기

Question

나는 페이지 너비가 768 픽셀 이하로 떨어지면 CSS의 간단한 비트 텍스트의 크기를 조정하는 데 사용 있습니다

<style type="text/css"> 
.rand1 { 
    font: 20px/0.5 'Volkhov', serif;; 
} 


@media (min-width: 768px) 
{ 
    .rand1 { 
     font: 50px/1.3 'Volkhov', serif;; 
    } 
}     

</style> 
<link href='http://fonts.googleapis.com/css?family=Volkhov' rel='stylesheet' type='text/css'> 

그것은 잘 작동 - 예를 들어, 여기 샘플 페이지에서 볼 수 있습니다

http://jimpix.co.uk/words/username-generator.asp?yours=Joy&go=yes&ul1=0&dt=d2

나 페이지가 전체 폭이 때/넓은 768 픽셀보다, 그것의 50 픽셀의 글꼴 크기를 사용한다는 것입니다 혼란 것은 언제 좁은, 그것은 더 작은 글꼴 크기 인 20px를 사용합니다.

나는 그것이 다른 방향 일 것이라고 생각했을 것입니다. 페이지가 768 픽셀보다 좁 으면 CSS의 @media 섹션에있는 CSS를 사용합니다. 그러나 다른 방법으로 보입니다.

나는 희미한가?

조언을 주시면 감사하겠습니다.

감사합니다.

Answer 1

이것은 max-width 대신 min-width를 사용하기 때문입니다. 따라서 페이지가 768px보다 넓은 경우 글꼴 크기를 50px로 지정하십시오. 당신이 당신의 코드를 변경하는 경우

:

.rand1 { 
    font: 50px/1.3 'Volkhov', serif;; 
} 


@media (max-width: 768px) 
{ 
    .rand1 { 
     font: 20px/0.5 'Volkhov', serif;; 
    } 
}  

그것은 당신이 할 것입니다 무슨 생각을 할 것입니다.
희망을 설명했습니다.

http://css-tricks.com/css-media-queries/