다른 네트워크 크기의 타일 상자

Question

내 반응 형 디자인에 몇 가지 문제가 있습니다.

은 내가 mediaqueries

@media screen and (max-width:960px) { 

} 

@media screen and (max-width: 783px) { 

} 

@media screen and (max-width: 524px) { 

} 

으로 반응하고 싶지 this

추천 상자를하지만 내 디자인에 상자를 제어 할 수 없습니다. JSFiddle

Answer 1

다음과 같은 몇 가지 해결책을 시도해보십시오 :

• http://purecss.io/grids/
• http://semantic-ui.com/

을

또는 특정 각 미디어 쿼리에 대한 각 상자의 너비.

Answer 2

은 그냥 CSS 영역에 코드 줄을 넣어이 뛰어나게 일 :

@media screen and (max-width:1500px) { 
    .block {width: 250px} 
} 

@media screen and (max-width: 700px) { 
    .block {width: 100px} 
} 

Answer 3

너비 만 응답해야하는 경우 max-width 및 width의 비율로 작업 할 수 있습니다. 좋아요 : http://jsfiddle.net/bbwkc/3/

.block_main { 
    max-width:750px; 
    width: 75%; 
} 

기타 등등.