페이지를 모바일 친화적으로 만드시겠습니까?

Question

나는 많은 웹페이지와 일부 웹사이트를 가지고 있습니다. 문제는 제가 초보자라는 것입니다. 저는 기본 html5와 css3을 사용하고 있지만 확장, 축소 및 모바일 친화적으로 만드는 방법을 모르겠습니다. 예를 들어, 다음은 내 페이지 중 하나와 내 사이트 중 하나인데, 확대 및 축소할 때 사소한 문제가 있고 전혀 모바일 친화적이지 않다는 것을 알 수 있습니다.

https://mitkovtori.github.io/

https://mitko-vtori-world.github.io/Mitko-Vtori-World/

그럼 모든 크기의 문제를 해결하거나 모바일 장치 등에서 문제를 재현할 수 있는 방법이 있나요?

크기를 나타내기 위해 백분율 "%"를 사용해 보았습니다. 예:

<width="25%">

저도 픽셀 "25px"를 사용해 보았습니다. 숫자 "25"만 있습니다.

하지만 무엇을 하든 항상 기기를 확대, 축소하고 이동하는 데 문제가 있습니다.

코드는 100% 오픈 소스이므로 내 쓰레기 코드를 둘러보고 내가 어디서 잘못되었는지 알아낼 수 있습니다.

처음에 공유한 두 웹사이트의 저장소: https://github.com/MitkoVtori/MitkoVtori.github.io

https://github.com/Mitko-Vtori-World/Mitko-Vtori-World

Answer 1

미디어 쿼리를 사용하세요. 예를 들어 1023px보다 작은 화면 크기에 대한 스타일을 지정하려면 CSS 파일 하단에 다음을 추가해야 합니다

으아아아

768 이하로 원하시면 다시 해주세요

으아아아

큰 화면과 작은 화면 모두에 적합한 유사한 모드