ddc8839e67
* Add new Content flex box * add content FlexBox * add content flexbox * add content flexbox * improve bootstrap doc * improve the bootstrap doc * improve the bootstrap doc * Create fcc123 adding jumbotron documentation.. * adding document html editors * fix: made Editors folder lowercase * chore: delete unwanted file
5.9 KiB
title
| title |
|---|
| Responsive Web Design |
Responsive Web Design
Responsive web design is the concept of designing web pages that adapt to different screen sizes. It commonly involves the use of different layouts, font sizes, and placement of navigation menus.
A mobile first approach should be used when building a responsive website or web app which means styling for the smallest screen first, usually 320px, and then using media queries to style layout for larger screens.
In order to create a responsive web page, CSS is commonly used to style your HTML elements. Some common methods in CSS used to create responsive web designs are:
- Writing media queries
- Using pre-existing CSS frameworks
- Using the Flexbox model
- Using CSS Grid
1. Media queries
Media queries tell the web browser to ignore or replace properties of the webpage based on specific attributes like screen width or whether the user is printing.
@media (query) {
/* The browser will use the CSS rules within the curly braces when the query is true */
}
The following example sets padding-left and padding-right within the class more-padding when the screen width is less than or equal to 768px.
@media screen and (max-width: 768px) {
.more-padding {
padding-left: 10px;
padding-right: 10px;
}
}
2. CSS Frameworks
CSS frameworks like Bootstrap, Material Design Lite, and Foundation have pre-built CSS classes that make responsive design coding simpler. These classes operate like standard HTML classes.
In this example, col-md-9 and col-sm-6 set the width of the <div> tag based on whether the screen is small or medium.
<div class="col-12 col-md-9 col-sm-6"></div>
The Bootstrap framework divides a row into twelve columns. In the above example, the <div> will spread across either nine or six of them. The grid system, pictured below, is fundamental to how Bootstrap eases responsive design.
3. Flexbox Model
The flexbox layout model, makes it's easier to design responsive layout structure without using float or positioning.
This layout model is one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities.
The main axis is defined by flex-direction, which has four possible values:
* row
* row-reverse
* column
* column-reverse
To start using the Flexbox model, you need to first define a flex container.
The flex container becomes flexible by setting the display property to flex:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
The flex container properties are:
* flex-direction
* flex-wrap
* flex-flow
* justify-content
* align-items
* align-content
The flex item properties are:
* order
* flex-grow
* flex-shrink
* flex-basis
* flex
* align-self
CSS Flexbox Properties
The following table lists the CSS properties used with flexbox:
| Property | Description |
|---|---|
| display | Specifies the type of box used for an HTML element |
| flex-direction | Specifies the direction of the flexible items inside a flex container |
| justify-content | Horizontally aligns the flex items when the items do not use all available |
| flex-wrap | Specifies whether the flex items should wrap or not,there is not enough |
| if room for them on one flex line | |
| align-content | Modifies the behavior of the flex-wrap property. It is similar to align-items,but |
| flex-flow | A shorthand property for flex-direction and flex-wrap |
| order | Specifies the order of a flexible item relative to the rest of the flex items |
| align-self | Used on flex items. Overrides the container's align-items property |
| flex | A shorthand property for the flex-grow, flex-shrink, and the flex-basis |
| properties | |
| align-items | Vertically aligns the flex items when the items do not use all available |
| space on the cross-axis |
Shorthand values for the flex properties
The predefined values are as follows:
- flex: initial
- flex: auto
- flex: none
- flex: <positive-number>