#html #css #media-queries #width #responsive
#HTML #css #медиа-запросы #ширина #отзывчивый
Вопрос:
вот ссылка на мой код
https://jsfiddle.net/bb567go/wzg21fnk/
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Module-2 Assignment</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
*{ margin:0;
padding:0;
box-sizing: border-box;
}
body{
font-size: 15px;
font-family: cursive;
}
h1{
text-align: center;
position: relative;
top:50px;
}
section{
height:100vh;
width:100%;
display: flex;
flex:row wrap;
justify-content: center;
align-items: center;
border:2px solid black;
}
#pink{
background-color: rgb(228, 111, 169);
}
#red{
background-color: rgb(216, 61, 61);
color: white;
}
#yellow{
background-color: rgba(245, 220, 77, 0.904);
}
.btn
{
position: relative;
top:-25px;
right:-5px;
height:25px;
float: right;
width:100px;
border: none;
outline:none;
border-bottom: black;
border-left: black;
}
.gray{
border: 2px solid black;
justify-self: center;
margin: 15px 10px;
background-color:gray;
align-self: center;
width:100%;
height:200px;
line-height: 20px;
padding: 25px 5px 5px 5px;
}
@media only screen and (min-width:991px){
.gray{
width:33.3%;
}
}
@media only screen and (min-width:768px) and (max-width:991px){
#item-1,#item-2{
width:50%
}
#item-3{
width:100%
}}
@media only screen and (max-width:767px){
.gray{
width:100%
}
}
</style>
<h1>Our Menu</h1>
<section class="main-section">
<div class="gray" id="item-1">
<div> <button class="btn" id="pink">Chicken</button></div>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam iusto necessitatibus
magnam modi
harum? Fugit et fuga nam molestiae, laborum debitis aperiam amet atque blanditiis placeat
dolorem
dolorum eius, delectus quam quasi voluptate perferendis iste? Libero, quibusdam nam,
alias quisquam
sit provident labore animi quos dolorum ipsum pariatur est modi.</p></div>
<div class="gray" id="item-2">
<div> <button class="btn" id="red">Beef</button></div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam iusto
necessitatibus magnam modi
harum? Fugit et fuga nam molestiae, laborum debitis aperiam amet atque blanditiis
placeat dolorem
dolorum eius, delectus quam quasi voluptate perferendis iste? Libero, quibusdam nam,
alias quisquam
sit provident labore animi quos dolorum ipsum pariatur est modi.</p></div>
<div class="gray" id="item-3">
<div> <button class="btn" id="yellow">Sushi</button></div>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam iusto
necessitatibus magnam modi
harum? Fugit et fuga nam molestiae, laborum debitis aperiam amet atque blanditiis
placeat dolorem
dolorum eius, delectus quam quasi voluptate perferendis iste? Libero, quibusdam nam,
alias quisquam
sit provident labore animi quos dolorum ipsum pariatur est modi.</p></div>
</section>
я хочу, чтобы мой адаптивный дизайн был таким: на рабочем столе
со всеми серыми полями с текстом в одной строке
на планшете
я хочу, чтобы первые два поля занимали половину полупространства в первой строке, а третье поле в следующей строке покрывало пробел — общую сумму первых двух полей, которые присутствовали в предыдущей строке
на мобильных телефонах
каждое поле в следующей строке
Комментарии:
1. Используйте сетку начальной загрузки
Ответ №1:
Я видел ваш код, а не проблему с медиа-запросом. Вы потеряли какие-либо другие функции, поэтому вы можете использовать решение ниже.
Решение:
section{
flex-wrap:wrap
}
Ответ №2:
Эй, я поиграл с вашим кодом, и я верю, что вывел вас на правильный путь.
Проверьте это:https://jsfiddle.net/d9L36wjh/6 /
*, *:before, *:after {
box-sizing: border-box;
}
body{
font-size: 15px;
font-family: cursive;
}
h1{
text-align: center;
top:50px;
}
section{
display: flex;
height: 100vh;
width: 100%;
flex-wrap: wrap;
justify-content: center;
align-items: center;
border: 2px solid black;
}
#pink{
background-color: rgb(228, 111, 169);
}
#red{
background-color: rgb(216, 61, 61);
color: white;
}
#yellow{
background-color: rgba(245, 220, 77, 0.904);
}
.btn
{
position: relative;
top: -25px;
right: -5px;
height: 25px;
float: right;
width: 100px;
border: none;
outline: none;
border-bottom: black;
border-left: black;
}
.gray{
border: 2px solid black;
margin: 15px 10px;
background-color: gray;
width: 400px;
height: auto;
line-height: 20px;
padding: 25px 5px 5px 5px;
}
@media (max-width: 480px) {
section {
flex-direction: column;
}
.gray {
width: auto;
}
}
@media (max-width: 1280px) {
section {
align-items: stretch;
}
#item-1 {
flex-grow: 1;
}
#item-2 {
flex-grow: 1;
}
#item-3{
flex-grow: 2;
}
}
Остальное вы должны сделать сами. Ознакомьтесь с этим руководством:https://css-tricks.com/snippets/css/a-guide-to-flexbox /
Вам просто нужно настроить медиа-запрос для переноса столбцов, чтобы он не переполнял контейнер разделов в мобильном представлении. И вы, вероятно, хотите увеличить высоту контейнера элементов в разных окнах просмотра. Вам все еще нужно что-то сделать, но отсюда это не должно иметь большого значения.
Обновление: я скорректировал медиа-запрос и считаю, что теперь он выглядит так, как вы хотели, чтобы он выглядел.
получайте удовольствие