화면 크기를 기준으로 요소 크기 조정

Question

내 웹 사이트에서 원형 목록 요소를 사용하여 메뉴를 만들었습니다. 작은 화면에서 움직이는 데 문제가 있습니다. 화면 크기에 비례하여 크기를 조정하고 같은 줄에 머물 수있는 방법을 찾지 못했습니다. 화면 크기가 특정 크기보다 작 으면 다른 행이나 모든 곳으로 점프합니다.

화면 크기에 상대적으로 크기를 조정하면 한 줄에 머물러 있기를 바랍니다.

참고 : 모바일 및 태블릿에는 적용되지 않으므로 다른 디자인을 사용합니다.

문제의 웹 사이트

은 여기에 있습니다 : 당신의 도움 :) 사전에 http://wonx.dk/pwdh2/index.html

감사합니다.

Answer 1

을 CSS에서 당신이 실제로 텍스트 크기를 조절할 수/반응 원을 만들 수의 높이를 정의하여 0으로 원을 그리며 패딩 하단을 원의 너비 값으로 설정합니다. 텍스트가 포함 된 범위를 던지고 절대적으로 가운데에 놓으면 완전히 크기를 조절할 수 있습니다.

보너스로 확장 가능한 원과 텍스트를 갖기 위해 font-size를 VW 단위로 지정했습니다.

link to fiddle -> http://jsfiddle.net/788fLgjf/2/ 

.circle { 
    position:relative; 
    width:15%; 
    height:0; 
    padding-bottom:15%; 
    background:black; 
    display:inline-block; 
    border-radius:100%; 
} 
.circle > span { 
    position:absolute; 
    color:white; 
    left:50%; 
    top:50%; 
    -webkit-transform:translate3d(-50%,-50%,0); 
    font-size:3vw; 
} 

Answer 2

나는 당신이 원하는 것은 탄성 (또는) 유동적 인 레이아웃이라고 생각한다.
요소를 브라우저 창의 크기에 따라 조정하려면 고정 레이아웃 대신 유체 레이아웃을 사용해야 할 수 있습니다. 이 기사를 확인하십시오.

What's The Difference Between Liquid, Elastic, Relative, Fluid, Flexible and Fixed Layouts?

Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?

Answer 3

당신은 주요 사업부의 목록을 넣어해야합니다

#main_div{ 
    width:500px; height:150px; //for example 
    margin:0 auto; //to center the div 
}