JS 전체 페이지 스크롤 레이아웃에 대한 반응적인 문제

Question

나는이 웹 사이트에서 일하고있다. 반응 형 디자인을 테스트하기 시작할 때까지 모든 것이 작동한다.

콘텐츠가 많이 끊깁니다. 웹 사이트 링크 : http://ciesseprogettazioni.netkom.it/

어떻게 예방할 수 있으며 콘텐츠를 실제로 반응 적으로 만들 수 있습니까?

나는이 워드 프레스 플러그인이 각 스크롤 가능한 섹션에 100VH를 설정하기 때문에 VH를 설정하는 데 VH를 사용하려고 생각합니다.

아이디어가 있으십니까? 그 내용을 정말 반응 적으로 만들기 위해 %로 모든 것을 만들어야합니까?

Answer 1

페이지 폭이 작아지는 동안 많은 요소에 문제가 발생합니다. 훑어보기에서 일부 elemnt가 높이, 너비 등을 설정 한 것을 보았습니다 (px). responsivness를 높이기위한 한 가지 단계는 em, vh, %와 같은 응답 단위를 사용하는 것입니다.

또한 @media 속성을 사용하여 웹 사이트의 너비가 어떻게 작동하는지 더욱 정확하게 지정할 수 있습니다. 이렇게하려면 당신은 당신의 HTML 헤드에서 이것을 사용한다 :이 같은

<meta name="viewport" content="width=device-width, initial-scale=1" /> 

뭔가를 당신의 CSS에서 :

@media (min-width: 320px) and (max-width: 567px){ 
    #selector{ 
    css:value;} 
} 

위의 예를 화면 크기 사이되면 당신은 당신이 원하는대로 수정하게됩니다 320px 및 567px.

한 번에 한 가지 문제를 해결하고 마크 업 코드로 질문을 문서화하고 문제를 해결하려고 시도한 것이 무엇인지 제안합니다. 사람들은 당신이 그 일을 언로 드하지 않으면 많은 도움을받을 것입니다. 귀하의 질문에 지금 서서 그것은 읽습니다 : 나는 문제가있어, 나를 위해 그것을 해결.