특정 폭을 기준으로 정렬이 바뀝니다.

Question

사이트의 포트를 새 서버로 돕고 있습니다. 이 모든 것은 상속 된 코드입니다. http://fcxcobalt.fmi.com/products/

이 호 : 1690px에

하지만을 이상이 폭 : 화면 폭에서

<h1 class="main-content-heading"><span class="wrapper">Products</span></h1> 

미만 1690px 호에는 원하는대로 정렬 일례 페이지 이쪽 요소 왼쪽은 문서 본문에 맞 춥니 다.

호에는 자신의 CSS는 문제가되지 않을 수 있지만 그것은이다

.main-content-heading { 
    margin: 0 0 1.2em; 
    padding: 0.5em 0; 
    font-weight: 300; 
    color: #fff; 
    background: #1c3f94; 
    text-transform: uppercase; 
} 

Unminified CSS 여기에서 볼 수있다 : http://pastebin.com/s5MVMZVj이

사람이 정렬이 일치 할 수있는 방법에 관해서는 저를 조언 할 수 있습니까?

Answer 1

은 당신이 여기서보고있는 것은 CSS의 미디어 쿼리의 결과입니다 (! 당신이 잘 발견, 1690px 추정)

@media screen and (min-width:1707px){ 
    .wrapper,.page-head,.site-menu,.droplets,.wide-content{ 
     margin:0 auto 
    } 

} 

@media screen and (max-width:1040px){ 
    .wrapper,.page-head,.site-menu,.droplets,.wide-content{ 
     margin:0 3% 
    } 

    .bx-aspect-wrapper{ 
     margin-bottom:-10em 
    } 

    .bx-pager{ 
     right:3% 
    } 

    .bx-slide-caption,.bx-prev,.bx-next{ 
     font-size:130% 
    } 

} 

1707px에서 일어난 일을 통해 스위치.

이것은 반응 형 디자인의 한 예이며 디자이너는 margin: 0 auto이 모두 함께 접히는 작은 화면의 경우 왼쪽/오른쪽 여백을 유지하려고한다고 추측합니다.

브라우저에 이상이 없으며 CSS는 의도 한대로 동작하고 있습니다.

물론 날카로운 전환은 약간보기 흉한 것일 수 있습니다.

이 설정은 margin: 0 Mpx으로 설정하면 더 매끄럽게 만들 수 있습니다. 여기서 M은 (1707px - {페이지 레이아웃 너비 px})/2에 근접 할 수있는 불가사의 한 픽셀 수이지만 표시하려면 시도해야합니다. 나는 다음과 같은 CSS 조각에 margin: 0 auto 선언을 생략하는 경우가에 가정되는 경우, "제품"레이블이 유지 것을 발견 폭보다 큰 1707px

에 대한 레이아웃 글리치 고정

.

나는 Firefox에서만 이것을 테스트했다.

@media screen and (min-width:1707px){ 
    .wrapper,.page-head,.site-menu,.droplets,.wide-content{ 
     margin:0 auto 
    } 
}