#html #css #responsive
Вопрос:
Я новичок в HTML и CSS, и я пытаюсь выполнить несколько проектов, чтобы привыкнуть к основам. Однако я застрял на том, как я могу сделать все в этом окне отзывчивым. Когда я изменяю размер экрана на мобильный, он выглядит странно по сравнению с тем, когда он растянут в режиме рабочего стола. Как сделать так, чтобы текст и элементы оставались одинакового размера, а все поле уменьшалось, а не текст? В принципе, я думаю, как мне сделать всю эту коробку и содержимое [отзывчивыми][1] в соответствии с размером экрана, пожалуйста? Спасибо вам 🙂
Вот HTML И CSS:
*{ margin: 0; padding: 0; box-sizing: border-box; } body { background-color: hsl(217, 54%, 11%); } .container { height: 100vh; display: flex; justify-content: center; align-items: center; } .box { background-color: hsl(216, 50%, 16%); width: 40vw; height: 70vh; padding-left: 40px; padding-right: 40px; padding-top: 40px; border-radius: 10px; } h3 { color: white; font-family: 'Outfit', sans-serif; font-size: 18px; } .box__img { width: 100%; object-fit: contain; position: relative; } .box__text { color: #ECECEC; font-family: 'Outfit', sans-serif; font-size: 12px; } .diamond { padding-right: 12px; position: relative; } .diamond_text { color: hsl(178, 100%, 50%); font-family: 'Outfit', sans-serif; font-size: 12px; display: inline; } .clock_icon { padding-left: 5px; } .clock_text { color: hsl(211, 67%, 67%); font-family: 'Outfit', sans-serif; font-size: 11px; padding-top: 2px; } lt;!DOCTYPE htmlgt; lt;html lang="en"gt; lt;headgt; lt;meta charset="UTF-8"gt; lt;meta http-equiv="X-UA-Compatible" content="IE=edge"gt; lt;meta name="viewport" content="width=device-width, initial-scale=1.0"gt; lt;titlegt;Project 2lt;/titlegt; lt;link rel="stylesheet" href="stylesheet.css"gt; lt;link rel="preconnect" href="https://fonts.googleapis.com"gt; lt;link rel="preconnect" href="https://fonts.gstatic.com" crossorigingt; lt;link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300amp;display=swap" rel="stylesheet"gt; lt;/headgt; lt;bodygt; lt;maingt; lt;div class="container"gt; lt;div class="main"gt; lt;div class="box"gt; lt;img class="box__img" src="image-equilibrium.jpg" class="w3-round" alt="Square image"gt; lt;brgt; lt;brgt; lt;h3gt;Equilibrium #2000lt;/h3gt; lt;brgt; lt;p class="box__text"gt;Our Equilibrium collection promotes health and calm.lt;/pgt; lt;brgt; lt;img src="c.svg" class="diamond" alt="diamond" style='float: left;' /gt; lt;p class="diamond_text"gt;0.041 ETHlt;/pgt; lt;img src="icon-clock.svg" style='float: right;' class="clock_icon" /gt; lt;p style='float: right;' class="clock_text"gt;3 days leftlt;/pgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/maingt; lt;/bodygt; lt;/htmlgt; Ответ №1:
Попробуйте включить » px «на них»,
Пиксель-это статическое измерение, в то время как процент и EM являются относительными измерениями. Размер EM или процента зависит от его родителя. Если размер текста основного текста составляет 16 пикселей, то 150% или 1,5 EM будут составлять 24 пикселя (1,5 * 16).
Ответ №2:
вы можете попробовать следующее : используйте медиа-запрос, чтобы сделать все элементы отзывчивыми…
*{ margin: 0; padding: 0; box-sizing: border-box; } body { background-color: hsl(217, 54%, 11%); } .container { height: 100vh; display: flex; justify-content: center; align-items: center; padding:10px; } .box { background-color: hsl(216, 50%, 16%); width:40vw; height:auto; padding:40px; border-radius: 10px; } h3 { color: white; font-family: 'Outfit', sans-serif; font-size: 18px; } .box__img { width: 100%; max-width:100%; object-fit: contain; position: relative; } .box__text { color: #ECECEC; font-family: 'Outfit', sans-serif; font-size: 12px; } .diamond { padding-right: 12px; position: relative; } .diamond_text { color: hsl(178, 100%, 50%); font-family: 'Outfit', sans-serif; font-size: 12px; display: inline; } .clock_icon { padding-left: 5px; } .clock_text { color: hsl(211, 67%, 67%); font-family: 'Outfit', sans-serif; font-size: 11px; padding-top: 2px; } /* media */ /*for mobile*/ @media(max-width: 768px) { .box { width:100%; } } @media(min-width:768px) { .box { width:40vw; } } lt;!DOCTYPE htmlgt; lt;htmlgt; lt;headgt; lt;meta charset="UTF-8"gt; lt;meta http-equiv="X-UA-Compatible" content="IE=edge"gt; lt;meta name="viewport" content="width=device-width, initial-scale=1.0"gt; lt;titlegt;Project 2lt;/titlegt; lt;link rel="stylesheet" href="stylesheet.css"gt; lt;link rel="preconnect" href="https://fonts.googleapis.com"gt; lt;link rel="preconnect" href="https://fonts.gstatic.com" crossorigingt; lt;link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300amp;display=swap" rel="stylesheet"gt; lt;titlegt;lt;/titlegt; lt;/headgt; lt;!DOCTYPE htmlgt; lt;html lang="en"gt; lt;bodygt; lt;maingt; lt;div class="container"gt; lt;div class="main"gt; lt;div class="box"gt; lt;img class="box__img" src="image-equilibrium.jpg" class="w3-round" alt="Square image"gt; lt;brgt; lt;brgt; lt;h3gt;Equilibrium #2000lt;/h3gt; lt;brgt; lt;p class="box__text"gt;Our Equilibrium collection promotes health and calm.lt;/pgt; lt;brgt; lt;img src="c.svg" class="diamond" alt="diamond" style='float: left;' /gt; lt;p class="diamond_text"gt;0.041 ETHlt;/pgt; lt;img src="icon-clock.svg" style='float: right;' class="clock_icon" /gt; lt;p style='float: right;' class="clock_text"gt;3 days leftlt;/pgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/maingt; lt;/bodygt; lt;/htmlgt;