지금은 페이지를 렌더링 할 때마다 먼저 $(window).width()을 계산 한 다음 루트 html 요소에 해당하는 클래스를 추가합니다.이 클래스는 페이지에서 일부 주요 응답 요소의 블록 너비를 최종적으로 결정합니다. 그러나이 접근법은 문제와 관련이 있습니다. 먼저 페이지를 초기 기본 너비로 렌더링 한 다음 클래스를 추가 한 후에는 요소 폭을 조정하여 부드럽 지 않은 시각적 효과를 만듭니다.반응 형 웹 페이지를 더 빨리 렌더링하는 방법은 무엇입니까?
이를 극복하기 위해 먼저 모든 응답 요소를 display: none으로 만들고 너비 계산이 완료된 후에 표시되도록합니다. 그러나 사용자의 경우이 방법으로 페이지를 보는 데 더 많은 시간이 걸립니다.
이렇게 반응이 빠른 페이지를보다 효율적이고 빠르게 만들 수있는 방법이 있는지 궁금합니다.
javascript을 사용하여 반응 형 사이트를 만드는 경우 훨씬 쉬운 방법이 있습니다.
예를 들어, 톤 당신이 CSS 제어하는 javascript 솔루션으로 최대 거의 많은 자원을 먹지 않는 반응 페이지를 만들기 위해 활용할 수있는 무료 CSS 기반 프레임 워크의있다. javascript을 가진 DOM 조작의 제비는 꽤 빨리 꽤 털이 많을 수있다.
나의 제안은 일부 조사하는 것입니다 다음
나는 개인적으로 내 개발 foundation를 사용 , 읽기 쉽고 이해하기 쉽고 생산하기 쉽습니다. 급속 성장.
예 : Javascript이 DOM 렌더링을 처리하는 데에 절대적으로 죽은 설정되어있는 경우http://www.sinsysonline.com/secondhomehostel
, CSS responsive 사이트보다 훨씬 느린거야. 특정 문제에 대한 자세한 설명을 원하는 경우에 당신은 당신의 코드를 제공하시기 바랍니다 수http://responsejs.com/
을 나는 ':
그렇다면, 시도 그 점에 대해 약간의 피드백을 기쁜 마음으로 제공합니다.
CSS 미디어 쿼리를 사용하면 화면 크기에 따라 CSS를 적용 할 수 있습니다.당신의 접근 방식을 통해이의 장점은 : 사용자가 태블릿을 창 크기를 조정 (또는 회전하면
1) CSS는
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
) 페이지가 자동으로 조정됩니다 즉시정확한 크기와 페이지 표시 방법 (모바일, 태블릿, 데스크톱 등)에 대한 기타 등등을 사용자 정의하려는 경우이 방법이 유용합니다. –
반응 형 웹 사이트를 만드는 데 매우 유용한 css3 미디어 쿼리를 사용해야합니다. 뷰포트 너비에 따라 CSS를 작성해야합니다. 반응 형 웹 사이트에 대한 모든 아이디어를 얻을 수있는 link을 참조하십시오.
응답 성있는 웹 사이트에서 작업하는 것이 도움이되기를 바랍니다.
js없이 페이지를로드하는 모든 사람에게 내 콘텐츠가 숨겨져 있지 않으면 google에서 더 잘 할 수 있습니다. – dandavis
클래스를 추가하기 위해 페이지로드가 대기 중입니까? 당신은해서는 안됩니다. 'window'와''은 JS에 도착할 때까지 사용할 수 있기 때문에, 몸체를로드하기 전에'' 태그를 업데이트 할 수 있어야합니다. – acbabis
@dandavis 오, 나는이 부분조차 몰랐다. 고마워. – chaonextdoor