CSS 전환 : 오른쪽으로 이동

응답 성있는 웹 사이트를 만들어야하며 브라우저를 지정된 크기로 줄이면 왼쪽의 로고가 가운데로 오도록 오른쪽으로 이동하고 싶습니다.CSS 전환 : 오른쪽으로 이동

다음은 달성하고자하는 transition의 예입니다. 그것은 "2. 귀하의 전환을 활성화하시오"박스 1

나는 전환이 호버 (hover)에서 시작한다는 것을 알고 있지만 브라우저 크기를 재조정 할 때 활성화 할 수 있습니까? 또는 다른 대체 방법을 사용합니까? 여기

2013-01-07 NLimbu

왜 전환을 원하십니까? 브라우저가 크기를 조정할 수있는 유일한 이유는 화면 (뷰포트)이 작동 할 때뿐입니다. 내 말은 : 아무도 자신의 사이트를 디버깅하거나 다른 웹 사이트에서 마술을보고 사이트가 반응하는지 확인하지 않는 한 브라우저를 수동으로 "크기를 조정"하지 않을 것입니다. 일반 사용자의 경우와 같은 케이스가 발생했을 때 생각할 수있는 다른 이유가 없습니다. 그렇다면 0.5 %의 디자이너는 코드에 쓸모없는 CSS를 넣고 응답자인지 확인하고 싶습니다. 그러나 당신의 질문을지지하십시오. 당신은 이미 무엇을 시도 했습니까? – Jelmer

로고의 위치를 중앙에서 확인하고 싶습니까? 왜 margin-left : auto와'margin-right : auto; '를 사용하지 않는가? – gamehelp16

Lol good point Jelmer는 반응 디자인이나 웹 디자인을 처음 접했을 때 너무 혼란 스러웠다. 및 @ gamehelp16, 도움 주셔서 감사합니다. – NLimbu

당신은 CSS3 전환과 @media 쿼리의 혼합물을 사용하여이 작업을 수행 할 수 있습니다. 이것은 무엇을

div 
{ 
    height: 100px; 
    width: 200px; 
    position: relative; 
    background-color: #eee; 
    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    -ms-transition: all 1s ease-in-out; 
    transition: all 1s ease-in-out; 
} 

@media all and (min-width: 400px) { 
    div 
    { 
    background-color: #fc3; 
    left: 100px; 
    } 
}

상대 위치에있는 요소에 대한 설정까지 전환을하지만, 분명히 (더 거기에 같이 가져가 또는 다른 선택)을 해고하지 않고 브라우저 인 경우 위치의 변화 (left: 100px;를) 선언 400px보다 넓습니다. "초과"값으로는 max-width을 사용하십시오.

분명히 필요한 값으로 변경해야하지만 분명히해야합니다.

http://jsfiddle.net/AvhvD/

출처

2013-01-07 08:38:10 Kyle

내가 할 것이 방법입니다

1: .logo { display block, width: xxx; margin 0 auto; transition: margin ... } 
2: @media (...) { 
    .logo { 
    margin-left: 0; 
    } 
}

출처

2013-01-07 08:31:37 simoncereska

나는 본다! 그게 내가 알고 싶었던거야. 건배 :) – NLimbu

것은 내가 테스트 것입니다 자바 스크립트와 jQuery를에 조건문을 만들 수 있다는 생각을 한 사실로 다음 브라우저 창 크기를 조정하고 브라우저 윈도우의 크기 범위 사이 인 경우, CSS 클래스를 추가하십시오. css 클래스를 제거하지 않으면.

이 새로운 클래스를 만들면 CSS3를 사용하여 애니메이션을 만들 수 있습니다. 이 작업이 가능하다면 너무 익숙하지 않지만 항상 JQuery로 되돌릴 수는 있습니다.

또한 미디어 쿼리 내부에 전환을 적용 할 수 있는지 여부는 알 수 없습니다. 그렇다면 큰 제안자이며이를 사용하는 것이 좋습니다.

희망이 있습니다.

출처

2013-01-08 00:02:39

CSS 전환 : 오른쪽으로 이동

답변

관련 문제