Using The width Property
If the width property is set to 100%, the video player will be responsive and scale up and down:
Example
video {
width: 100%;
height: auto;
}
Tag: cssf
Responsive Web Design – Images
Using The width Property
If the width property is set to a percentage and the height property is set to “auto”, the image will be responsive and scale up and down:
Example
img {
width: 100%;
height: auto;
}
Responsive Web Design – Media Queries
What is a Media Query?
Media query is a CSS technique introduced in CSS3.
It uses the @media rule to include a block of CSS properties only if a certain condition is true.
Example
If the browser window is 600px or smaller, the background color will be lightblue:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Responsive Web Design – Grid View
What is a Grid-View?
Many web pages are based on a grid-view, which means that the page is divided into rows and columns.
Using a grid-view is very helpful when designing web pages. It makes it easier to place elements on the page.
A responsive grid-view often has 6 or 12 columns, and will shrink and expand as you resize the browser window. Continue reading Responsive Web Design – Grid View
Responsive Web Design – Viewport
What is The Viewport?
The viewport is the user’s visible area of a web page.
The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.
Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size.
Then, when we started surfing the internet using tablets and mobile phones, fixed size web pages were too large to fit the viewport. To fix this, browsers on those devices scaled down the entire web page to fit the screen.
This was not perfect!! But a quick fix.
Setting The Viewport
HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag.
You should include the following <meta> viewport element in the <head> section of all your web pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
This gives the browser instructions on how to control the page’s dimensions and scaling.
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
Responsive Web Design
What is Responsive Web Design?
Responsive web design makes your web page look good on all devices.
Responsive web design uses only HTML and CSS.
Responsive web design is not a program or a JavaScript.
Designing For The Best Experience For All Users
Web pages can be viewed using many different devices: desktops, tablets, and phones. Your web page should look good, and be easy to use, regardless of the device.
Web pages should not leave out information to fit smaller devices, but rather adapt its content to fit any device: Continue reading Responsive Web Design
CSS Grid Item
Grid Items
A grid container contains one or more grid items.
By default, a container has one grid item for each column, in each row, but you can style the grid items so that they will span multiple columns and/or rows.
The grid-column-start and grid-column-end Properties
The grid-column-start property specifies where to start a grid item.
The grid-column-end property specifies where to end a grid item.
Example
Place the first grid item at column-line 1, and let it end on column-line 3:
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}
CSS Grid Container
Grid Container
A grid container contains one or more grid items arranged in columns and rows.
Direct child elements(s) of the grid container automatically becomes grid items.
An element becomes a grid container when its display property is set to grid or inline-grid.
Grid Tracks
The rows and columns of a grid is defined with the grid-template-rows and the grid-template-columns properties (or the shorthand grid or grid-template properties).
These define the grid tracks. A grid track is the space between two adjacent grid lines. Continue reading CSS Grid Container
CSS Grid Columns, Rows and Gaps
Grid Columns
The vertical lines of grid items are called columns.
Grid Rows
The horizontal lines of grid items are called rows.
Grid Gaps
The spaces between each column/row are called gaps.
CSS Grid Layout Module
See the Pen
CSS Grid Layout Module by Iampsp.com (@iampsp)
on CodePen.