Open Menu dzosoft
Close Menu dzosoft

   ALL ABOUT COMPUTER SCIENCE AND TECHNOLOGY


                             




TRAIN INTENSELY LIKE NEVER BEFORE AND PUSH YOUR LIMITS!

Publish perfectly-optimized content in 1-click









 
 
 

How To make a responsive website

 
 
How To make a responsive website
 
Responsive Web Design (RWD) is the use of HTML and CSS to automatically resize, hide, shrink, or expand a website, to make it look great on all devices (desktops, tablets, and phones).

 

Mobile-first approach

 
It is about starting the design of the product first for a mobile version which includes the most basic functions and then we move on to the advanced version for tablet or PC.
 
How To make a responsive website
 

This Mobile First approach avoids loss of content when moving from a larger screen to a smaller screen.
Indeed, if we take the design of the mobile end product as a starting point, under restrictions such as bandwidth,
screen size, etc., designers will naturally grab the key points of a product to turn to a sober and neat product with priority features.
Also since 2016, we know that mobile internet usage surpassed desktop usage in 2016.
 

Use media queries

 
It is CSS technology based on media-queries that allows this adaptation.
The principle is simple: from a certain screen size, we apply a specific CSS to switch the presentation: this is called a breaking point.
With the code below, CSS code will be executed as soon as the screen size is greater than or equal to 600px:
@media screen and (min-width: 600px) {
  /* css to execute */
}


For example, we will change the background color of the page (blue) as soon as the screen size is greater than 600px:

@media screen and (min-width:600px{
  body{
    background-color: red;
  }
})


 
How To make a responsive website
 

 

Media queries and Mobile First

 
In a Mobile First approach, we must first create the CSS for mobile formats and then use media-queries for larger screens (desktop).
Hence the use of the min-width instruction which means greater than or equal.
Continuing the example above, we are going to change the content of the page in relation to the size. We will use display: none to hide inappropriate content.

 

HTML code

<!-- Mobile content -->
<p id="mobile">Mobile content</p>
<!-- Desktop content -->
<p id="desktop">Desktop content</p>


 
How To make a responsive website
 

 

CSS code:


/* CSS pour le format mobile */
#desktop{
  display: none;
}
#mobile{
  display: block;
}

/* CSS pour les grands écrans */ @media screen and (min-width:600px){ #mobile{ display: none; } #desktop{ display: block; } })


Notice that the mobile CSS is done first.



 

Add viewport meta tag

 
If you want to give instructions to the browser on how to control the dimensions and scaling of the page, you must add in HTML in the <head> part the following meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">


 

Adjust image size

 
We talk about a reactive image when it adapts to the size of the screens.
To allow an image to keep its original size on a large screen but to reduce it automatically on a small screen, we use the max-width attribute: 100%

 

HTML code


<!DOCTYPE html>
<html>
<head>
<style>
/* CSS for mobile */
img{
  max-width: 100%;
}
</style>
</head>
<body>
<img width="500" 
src="https://images.unsplash.com/photo-1518950957614-73ac0a001408?ixlib
=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid
=eyJhcHBfaWQiOjE0NTg5fQ&s=6c859637d2eb66855ca891674fb6bd45" alt="">
</body>
</html>



 

Display different images depending on screen size

 

The HTML <picture> tag allows you to define different images for different screen sizes. In the example below the content of the image changes when you are on a large screen

<picture >
<source media="(min-width: 650px)" 
		srcset="https://googlechrome.github.io/samples/picture-element/images/kitten-large.png">
        <source media="(min-width: 465px)" srcset="https://googlechrome.github.io/samples/picture-element/images/kitten-medium.png">
        <!-- img tag for browsers that do not support picture element -->
        <img src="https://googlechrome.github.io/samples/picture-element/images/kitten-small.png" alt="a cute kitten">
</picture>



Notice the media="(min-width: 500px) syntax which sets the breakpoint to 500px.
We also add, as seen previously, the CSS to adapt the image according to the size of the screen:
/* CSS for mobile */
img{
  max-width: 100%;
}


 
How To make a responsive website
 

It might also interest you


How can we do animations with only CSS

How to create horizontal menu in CSS

How to create menu with css and javascript

How do you make a border radius round in CSS?

How to create sign up form with HTML and CSS

How to create GLITCH effect with CSS

How to change the style of the scrollbars

How to create a Focus effect on hover using CSS

How to create a footer using Bootstrap: tutorial and example


Leave comment
          

Save nickname and email in this browser for the next time.



Loading...     
close publicity
Publish perfectly-optimized content in 1-click