TechOceanhub
TechOceanhub
Responsive web page is a page that creates dynamic changes to its appearance, depending on the screen size and orientation of the device being used to view it. In responsive design, page elements reshuffle as the viewport grows or shrinks.
Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones). I have also added information about the most popular CSS frameworks for making a responsive design you have to follow certain steps below:
1) Add responsive meta tags in your HTML document -Never Forget this tag.
<meta name="viewport" content="width=device-width, initial-scale=1.0">2)Apply media queries to your layout.
/* how column is divided For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
3)Make images and embedded videos responsive.
img {
width: 100%;
height: auto;
}
Or
img {
max-width: 100%;
height: auto;
}
video {
width: 100%;
height: auto;
}
or
video {
max-width: 100%;
height: auto;
}
4)Ensure your typography will be easily readable on mobile devices.
1)Bootstrap CSS framework.
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<!– Never ever forget this tag – otherwise Tsunami will come–>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css” integrity=”sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z” crossorigin=”anonymous”>
<!– Optional JavaScript –><!– jQuery first, then Bootstrap JS –>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”>
</script><script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js”>
</script>
<style>
div{
border-color: red;
border-style: dotted; }
</style>
</head>
<body>
<div class=”container”>
<!– Stack the columns on mobile by making one full-width and the other half-width –>
<div class=”row”>
<div class=”col-md-8″>First Block</div>
<div class=”col-6 col-md-4″>First Block</div>
</div>
<!– Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop –> <div class=”row”>
<div class=”col-6 col-md-4″>Second Block</div>
<div class=”col-6 col-md-4″>Second Block</div>
<div class=”col-6 col-md-4″>Second Block</div>
</div>
<!– Columns are always 50% wide, on mobile and desktop –>
<div class=”row”>
<div class=”col-6″>Third Block </div>
<div class=”col-6″>Third Block</div>
</div>
</div>
</body>
</html><!doctype html><html class="no-js" lang="en">
<head>
<meta charset="utf-8" >
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Never ever forget this tag - otherwise Tsunami will come-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation Starter Template</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/css/foundation.min.css"
integrity="sha256-ogmFxjqiTMnZhxCqVmcqTvjfe1Y/ec4WaRj/aQPvn+I=" crossorigin="anonymous">
<style>
div{
border-color:#ff5733;
border-style: solid;
}
</style>
</head>
<body>
<div class="grid-x">
<div class="cell"> Full width cell </div>
<div class="cell"> Full width cell </div>
</div>
<div class="grid-x">
<div class="cell small-6">6 cells</div>
<div class="cell small-6">6 cells</div>
</div>
<div class="grid-x">
<div class="cell medium-6 large-4">small 12 cell / 6-Medium cell/ Large 4 cells
</div>
<div class="cell medium-6 large-8"> small 12 cell / 6-Medium cell/ Large 8 cells
</div>
</div>
</body>
</html>
Feel free to read and comment.
Copyright ©TechOceanhub All Rights Reserved.