CSS Flexbox - Как адаптировать мобильный? - PullRequest
Новая
       6

CSS Flexbox - Как адаптировать мобильный?

0 голосов
/ 07 мая 2020

Как сделать этот раздел адаптивным для мобильных устройств? Я разработал его в фигме, скопировал и вставил CSS, созданный фигмой. Может ли только flexbox сделать стек текста и изображения поверх каждого из них по мере уменьшения размера экрана. Или я бы просто спроектировал макет для экрана каждого размера в Figma, а затем использовал бы медиа-запросы, чтобы вызвать правильный макет css? Или есть другой способ сделать это лучше? 

/* Global Settings */
* {
	margin: 0;
	padding: 0;
	box-sizing: 0;
}

li,
a {
	font-size: 0.75rem;
	font-family: "Roboto";
	font-weight: 700;
	color: #303133;
	text-decoration: none;
}
h1 {
	font-size: 0.75rem;
	font-family: "Roboto";
}

button {
	width: 176px;
	height: 47px;
	background: #6442ff;
	color: #ffffff;
	font-family: "Roboto";
	font-size: 12px;
	line-height: 18px;
	align-items: center;
	border: none;
}

.section2-h1 {
	position: absolute;
	width: 582px;
	height: 99px;
	left: 160px;
	top: 1645px;

	font-family: Roboto;
	font-style: normal;
	font-weight: bold;
	font-size: 50px;
	line-height: 59px;

	color: #303133;
}

.section2-p {
	position: absolute;
	width: 537px;
	height: 163px;
	left: 158px;
	top: 1765px;

	font-family: Roboto;
	font-style: normal;
	font-weight: normal;
	font-size: 15px;
	line-height: 25px;

	/* or 167% */
	display: flex;
	align-items: center;

	color: #777777;
}

.section2-img {
	position: absolute;
	width: 528px;
	height: 402px;
	left: 738px;
	top: 1626px;
}
.section2-button {
	position: absolute;
	width: 176px;
	height: 47px;
	left: 161px;
	top: 1962px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Web Design and Web Development">
    <meta name="robots" content="index,follow">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"> 
    
    <title>Hello</title>
</head>
<body>
<section id="section2">
    <header class="section2-head">
        <h1 class="section2-h1"> Lorem ipsum dolor sit ame. 
        </h1>
        <p class="section2-p">Morbi sit amet varius nunc, blandit vulputate mi. Nulla a lobortis magna. Ut bibendum, augue quis lacinia tempus, justo ligula tincidunt ligula, eu bibendum ante libero imperdiet magna. Mauris vel consectetur arcu. Pellentesque risus tortor, lacinia nec dictum a, sagittis quis turpis. Aliquam dolor ante, rhoncus nec congue at, dictum vitae eros. Integer nec viverra leo. Curabitur blandit pretium rhoncus. In ut egestas elit</p>
        <img src="img/hello.jpg" alt="" class="section2-img">
        <button class="section2-button">READ MORE</button>
    </header>
     </body>
</html>

1 Ответ

1 голос
/ 07 мая 2020

Небольшой совет, я бы порекомендовал вам научиться писать свои собственные CSS, а не использовать CSS, созданный Figma. Код CSS, созданный Figma, использует абсолютное позиционирование для размещения ваших элементов HTML, которые будут работать на одном размере экрана, но веб-сайт не будет реагировать, поскольку он не будет хорошо работать на экране любого другого размера. Чтобы сделать ваш сайт отзывчивым, вы должны использовать такие вещи, как поля и отступы для размещения вашего кода. Вы можете использовать код Figma в качестве отправной точки.

Чтобы ответить на ваш вопрос, да, можно использовать flexbox для создания стека текста друг над другом. Это можно сделать, изменив его с display: flex; на display: block; на экранах меньшего размера с помощью медиа-запроса. Я бы посоветовал не использовать медиа-запросы для изменения CSS для каждого размера экрана с помощью Figma CSS, поскольку вам пришлось бы сделать это для многих размеров экрана. У вас должна быть только одна точка останова, чтобы складывать элементы в тонкую точку останова.

Ниже приведен фрагмент кода предложения о том, как изменить код Figma CSS на что-то более отзывчивое: 

/* Global Settings */
* {
	margin: 0;
	padding: 0;
	box-sizing: 0;
}

li,
a {
	font-size: 0.75rem;
	font-family: "Roboto";
	font-weight: 700;
	color: #303133;
	text-decoration: none;
}

h1 {
	font-size: 0.75rem;
	font-family: "Roboto";
}

button {
	width: 176px;
	height: 47px;
	background: #6442ff;
	color: #ffffff;
	font-family: "Roboto";
	font-size: 12px;
	line-height: 18px;
	align-items: center;
	border: none;
}

.section2-head {
	margin: 160px;
	display: flex;
	align-items: flex-start;
}

.section2-text {
	max-width: 537px;
	margin-right: 20px;
}

.section2-h1 {
	font-family: Roboto;
	font-style: normal;
	font-weight: bold;
	font-size: 50px;
	line-height: 59px;

	margin-bottom: 10px;

	color: #303133;
}

.section2-p {
	font-family: Roboto;
	font-style: normal;
	font-weight: normal;
	font-size: 15px;
	line-height: 25px;
	display: flex;
	align-items: center;
	margin-bottom: 40px;

	color: #777777;
}

.section2-img {
	width: 100%;
	max-width: 528px;
}

@media (max-width: 1100px) {
	.section2-head {
		margin: 80px;
		display: block;
	}

	.section2-text {
		margin-bottom: 40px;
		margin-right: 0;
	}
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Web Design and Web Development">
    <meta name="robots" content="index,follow">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"> 
    
    <title>Hello</title>
</head>
<body>
<section id="section2">
    <header class="section2-head">
		<div class="section2-text">
			<h1 class="section2-h1"> Lorem ipsum dolor sit ame. 
			</h1>
			<p class="section2-p">Morbi sit amet varius nunc, blandit vulputate mi. Nulla a lobortis magna. Ut bibendum, augue quis lacinia tempus, justo ligula tincidunt ligula, eu bibendum ante libero imperdiet magna. Mauris vel consectetur arcu. Pellentesque risus tortor, lacinia nec dictum a, sagittis quis turpis. Aliquam dolor ante, rhoncus nec congue at, dictum vitae eros. Integer nec viverra leo. Curabitur blandit pretium rhoncus. In ut egestas elit</p>
			<button class="section2-button">READ MORE</button>
		</div>
        <img src="img/hello.jpg" alt="" class="section2-img">
    </header>
</section>
</body>
</html>
...