브라우저 창의 가로 세로 비율을 유지하는 방법

HTML/CSS를 사용하여 제작 한 페이지가 TV에 표시되는 유일한 용도로 사용됩니다. 저는 1920x1080 비율로 완벽하게 맞출 수있는 페이지를 개발 했습니다만 원래 디자인과 정확히 같은 종횡비로 페이지 배율을 높이거나 낮추는 방법을 원합니다. 일정 비율을 유지하는 데 사용할 수있는 자바 스크립트가 있습니까?브라우저 창의 가로 세로 비율을 유지하는 방법

편집 : 결국 뉴스/이벤트/등의 컨텐츠를 지속적으로 업데이트하는 RoR 응용 프로그램이 될 것입니다.

출처

2012-10-26 Spentacular

간단한 문제를 해결할 창 크기 조정에서 수신 :

$(window).on('resize',funciton(){ 
    var self=$('#ur_id'); 
    self.height(self.width() * (1080/1920)) 
})

출처

2012-10-26 19:56:49

이것은 컨테이너의 종횡비를 유지하지만 내부의 요소는 유지하지 않습니다. – Spentacular

u는 px가 아닌 %에서 모든 작업을 수행해야합니다 ...하지만 정말 svg에서 다시 실행하는 것을 고려해야합니다. –

내용이 변경되어 모든 것을 이미지로 유지하면 목적을 달성 할 수 없습니까? – Spentacular

당신이

@media screen and (min-width: 1920px) { 
    /*Styles goes here*/ 
}

에 대한 CSS의 @media 쿼리를 사용하거나 사용할 수 media = projection

출처

2012-10-26 19:51:14

하지만 그 아래에서도 확장이 가능합니다. 그냥 여러 개의 브레이크 포인트를 만들고 각각에 대한 치수를 조정할 것을 제안 하시겠습니까? – Spentacular

예 특정 해상도에 특정 미디어 쿼리를 사용할 수 있습니다.이 방법은 깨끗합니다. –

미디어 = 프로젝션에 대해 읽은 적이 한번도 없습니다. 그것을위한 출처가 있습니까? 그것은 꽤 편리하게 들린다! – Spentacular

디자인에 대한을 1920x1080 해상도를 지원하는 장치는 대부분 모바일 장치에 적용 할 수 없습니다. 어쩌면 요소 (일반적으로 사이드 바)를 숨기거나 글꼴 크기를 줄이고 다른 로고를로드해야 할 수도 있습니다. 따라서 가장 좋은 해결책은 @media의 @Mr을 사용하는 responsive web design입니다. 외계인이 제안합니다.

반응 형 웹 디자인 사이트가 크기 조정, 패닝 및 스크롤-에 걸쳐 다양한 장치의 최소 (과 경험 쉽게 읽을 및 탐색 최적의 시야를 제공하기 위해 제작 된 웹 디자인에 대한 접근 방식 데스크탑 컴퓨터 모니터에서 휴대폰까지).

SmashingMagazine에서 Guidelines and Tutorials을 확인할 수 있습니다.

출처

2012-10-26 20:47:31

나는 반응 형 디자인으로 디자인을 구현하려고 시도했지만 가장 큰 문제는 글꼴의 크기가 제대로 조정되지 않았기 때문입니다 (sass와 백분율 함수에 대해 감사함). – Spentacular

상대 값 (예 : em 또는 %)을 사용하면 글꼴 크기, 선 높이 및 여백 간격을 상속 할 수 있습니다. –

브라우저 창의 가로 세로 비율을 유지하는 방법

답변

관련 문제