Хотелось бы, чтобы у вас был эскиз того, как будет выглядеть конечный продукт, он был бы очень полезен. Это не просто сделать правильный HTML-тег и соответствующие стили и опечатки, потому что из вашего кода дополнительный знак % сделает
.middle-about-me{
width: 50%%;
}
безобразничать.
Есть пара вещей, которые нужно знать, чтобы сделать отзывчивость страницы эффективной и очень близкой к тому, что вы хотите.
Во-первых, вам следует рассмотреть возможность сброса стилей по умолчанию, которые браузер естественным образом применяет к допустимым тегам HTML, с помощью normalize.css или использования универсального селектора, который почти так же хорош в современных браузерах, например:
*,
*::before,
*::after{
padding: 0;
margin: 0;
box-sizing: inherit; /* to inherit the value declared in the body selector */
}
html{
font-size: 62.5% /* (10/16) * 100% and this is possible because by default the value of 100% will be computed to 16px by the browser and equal to 1(r)em, with this conversion we can reduce the calculations whenever you want to convert a value from px to (r)em since the are in multiples of 10 eg 1(r)em == 10px and 10(r)em == 100px*/
}
body{
box-sizing: border-box;
}
img{
width: 100%;
min-width: 27rem; /* to make the images responsive and look good on smaller screens */
}
так что с этим базовым сбросом вы всегда можете положиться на em s или rem s для шрифтов в процентах для изображений и других блочных элементов, когда это будет уместно.
Эта небольшая статья недостаточно для того, чтобы научить вас всему, что нужно знать об отзывчивости в Интернете, но я надеюсь, что она проливает свет на ваш путь. Между тем это были не мои оригинальные идеи, которые я взял на курс «Йонаса Шмедтмана», он на самом деле думал, что я таков.
Если у вас есть набросок того, как должны выглядеть последние страницы, или вы все еще не очень понимаете, что я пытался объяснить до сих пор, пожалуйста, не стесняйтесь добавлять комментарии, чтобы мы приводили их в порядок.