2012-08-28 7 views
1

저는 레일을 처음 사용하기 때문에 첫 번째 웹 응용 프로그램을 만들었습니다. 나는 지금 내 앱의 스타일링을보고있다. 내 앱이 다른 기기에서 어떻게 보이는지에 대해 생각할 필요가 있다는 것을 알지만, 실제로 어떻게 또는 최선의 방법으로이를 알 수는 없습니다. 페이지가 렌더링되는 장치에 관계없이 표준보기를 사용할 수있는 방법이 있습니까?Ruby on Rails : 다른 장치 용 CSS

랩톱에서 어떻게 보이는지 알기 위해 물건을 움직이기 시작했지만 태블릿에서 페이지를보고 어떤 것들은 있어야하지만 다른 것들은 페이지의 가장자리에서 사라져서 기본적으로 스타일을 엉망으로 만듭니다. 나는 (나는 절대 위치 지정을 사용하는 것과 관련이 있다고 생각한다). 사용자가 기기 페이지를 최적화하는 것이 아니라 사용자가 기기를 확대하고 축소해야하는 돌로 설정된 페이지를 기기가보고 싶어한다고 생각합니다.

전혀 도움이되지 않습니다. 감사합니다.

답변

2

CSS 미디어 쿼리를 사용하여 화면 너비/높이에 따라 CSS 규칙을 최적화/변경할 수 있습니다. 이것들은 클라이언트의 브라우저에 의해 적용되는 일반적인 CSS 파일이기 때문에 당신 편에서 그들과 어울릴 필요가 없습니다. 상당히 좋은 질문이다

@media all and (max-width: 430px) and (min-width: 360px) { 
    /* put your mobile css in here */ 
} 
+0

감사합니다. 정확히 내가 필요한 것입니다. – Jazz

2

:

다음은 예입니다. 해결 방법은 트위터 부트 스트랩 프레임 워크를 사용하는 것입니다. 보석 파일에 보석을 넣고 묶어야합니다. 'bootstrap-sass', '2.0.0'. 그 후 귀하의 사용자 정의 CSS를 가져와 귀하의 필요에 따라 사용하십시오. 부트 스트랩은 좋은 팀이 트위터에서 반응하는 프레임 워크입니다. 기본적으로 제공하는 부트 스트랩은 응답하는 프레임 워크이므로 앱이 화면 크기가 앱에 따라 조정 되더라도 클라이언트 화면에 따라 자동으로 크기를 조정할 수 있습니다. 그것은 그리드 시스템을 가지고있어서 그런 식으로 기능합니다.

당신은, 여기 부트 스트랩에 대해 좀 더 배우고 당신이 찾고있는 무엇을 달성 도움이 될 몇 가지 사이트를 방문하고 싶은

http://twitter.github.com/bootstrap/ 또한 나는이 문제에 권장되는 보석은, 너무 그것으로 말대꾸 기능을 가지고 당신이 수도 있으므로 그것을 밖으로 확인하고 싶습니다 http://sass-lang.com/tutorial.html

+0

제안에 감사드립니다. Bootstrap이 작동하도록 내 앱을 변경하려고 시도했지만, 완전히 변경하려면 내 앱에 멀리 떨어져있다. 다음에 확실히 이것을 명심하십시오. 다시 한 번 감사드립니다 – Jazz

1

당신은 미디어 쿼리를 읽어야합니다. 트위터 부트 스트랩은 훌륭한 프레임 워크입니다. 그러나 이미 CSS가 있다면 (또는 새로운 것을 배우고 싶다면) 미디어 쿼리를 사용하여 자신 만의 반응 형 디자인을 설정할 수 있습니다. 시작하기에 알맞은 곳은 모바일 사이트를 만드는 방법입니다. this Smashing Magazine article

모두가 좋아하는 반응 프레임 워크를 처음부터 다시 시작하려면 Twitter Bootstrap을 확인하십시오.이 설명서는 사용하기 시작하는 데 도움이되는 정말 멋진 설명서를 제공합니다.

+0

기사 주셔서 감사합니다. 이것은 내가 필요한 것입니다. 건배 – Jazz