5,99 €
Mehr erfahren.
- Herausgeber: tredition
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Englisch
Welcome to the book "Responsive Design". In this book, I'll introduce you to all the CSS functions you need to create a responsive design. By responsive design, I mean that the website adapts its styles to the display device. So your application changes its layout, alignment, font size, images and even applies different styles for different screen sizes. For example, on wide screens such as TVs, it will display horizontally, while on mobile devices it will switch to a vertical layout. The functions of Responsive CSS include modern layouts such as Flex. This includes media queries, responsive typography and responsive images. It is not possible to list every single detail of all the features in a book, because then the book would be so extensive and you would get bored reading it. There is a wealth of information everywhere. So I'll keep it simple and tell you what you need for your project and try to get you on the right track. Let's go
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Seitenzahl: 26
Veröffentlichungsjahr: 2024
Ähnliche
Responsive Design
All CSS responsive features
Abdelfattah Ragab
Introduction
Welcome to the book "Responsive Design". In this book, I'll introduce you to all the CSS functions you need to create a responsive design.
By responsive design, I mean that the website adapts its styles to the display device. So your application changes its layout, alignment, font size, images and even applies different styles for different screen sizes. For example, on wide screens such as TVs, it will display horizontally, while on mobile devices it will switch to a vertical layout.
The functions of Responsive CSS include modern layouts such as Flex. This includes media queries, responsive typography and responsive images.
It is not possible to list every single detail of all the features in a book, because then the book would be so extensive and you would get bored reading it. There is a wealth of information everywhere. So I'll keep it simple and tell you what you need for your project and try to get you on the right track.
Let's go
Run on all devices
It would be great if you could develop your application just once and then run it on all devices.
You can achieve this by applying some CSS rules. In this book, I'll introduce you to all the CSS rules you can use to ensure that your app works smoothly on all devices and adapts to any screen size.
Here is an example page
The page has the following parts
<!-- header -->
<!-- featured -->
<!-- items -->
<!-- footer -->
The HTML document
Here is the original HTML document with the title, the logo and the link to the style.css file.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Shrova Mall</title>
<link rel="stylesheet" href="style.css" />
<link rel="shortcut icon" href="assets/images/logo.png" type="image/png" />
</head>
<body></body>
</html>
CSS
html,
body {
padding: 0;
margin: 0;
}
In the browser it looks like this, a blank page with title and favicon
The header
In the body element, we add our first element, the header
HTML
<div class="header">
<div class="brand">
<img class="logo" src="assets/images/logo.png" alt="" />
<div class="brand-name">Shrova Mall</div>
</div>
</div>
CSS
.header {
width: 100%;
height: 80px;
display: flex;
justify-content: flex-start;
align-items: center;
font-family: Arial, Helvetica, sans-serif;
padding: 0 30px;
box-sizing: border-box;
box-shadow: 0 0 2px 2px gray;
margin-bottom: 2px;
@media (min-width: 760px) {
padding: 0 100px;
}
}
.brand {
display: flex;
align-items: center;
gap: 16px;
}
.brand-name {
font-size: 2em;
cursor: pointer;
}
.logo {
width: 50px;
cursor: pointer;
}
The header component has only one group of components, the brand group, which consists of two elements, the logo and the brand name.
For the header component, display has been set to flex and justify-content to flex-start so that the brand group is left-aligned.
There are two elements within the brand group, so the brand group itself again has the display set to flex and 16px space between the logo and the brand name. The align-items property ensures that all items are aligned vertically in the center.
There are so many details about the flexible layout that I have dedicated an entire book to this layout.
