Creating screens and breakpoints in web development involves using HTML, CSS, and JavaScript to design and structure a responsive layout that adapts to different screen sizes. This allows websites to provide optimal user experiences across various devices, such as desktops, tablets, and smartphones. Here's a step-by-step guide on how to achieve this:
1.HTML Structure:
Start by defining the basic HTML structure of your webpage. Use semantic HTML tags to organize the content, such as <header>, <main>, <section>, and <footer>. These tags provide a logical structure to your page, making it easier to style and manipulate with CSS.
2. CSS Media Queries:
Media queries are the key to creating responsive designs. They allow you to apply different CSS styles based on the screen size or device type. To set up media queries, add the following code within the <head> section of your HTML document:In the above code, you define three media queries for different screen sizes: smaller screens (up to 768px wide), medium-sized screens (between 769px and 1024px), and larger screens (1025px and above). Adjust the screen size ranges according to your needs.
3. CSS Styles:
Within each media query block, you can specify CSS rules that will be applied only when the conditions defined in the media query are met. This allows you to customize the layout, positioning, font sizes, and other visual aspects of your website for each screen size.
Update the CSS rules within each media query block to match your desired layout and design choices for the respective screen sizes.
4. JavaScript (Optional):
If you require dynamic behavior based on the screen size, you can utilize JavaScript to manipulate the DOM or handle specific functionalities. For instance, you might want to change the behavior of certain elements or load different content based on the screen size. JavaScript frameworks like jQuery or libraries like React can be helpful in achieving this.
HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<section class="main">
<nav class="navbar" id="topnavbar">
<div class="icon">
<ion-icon name="laptop-outline" onclick="myFunctionA()"></ion-icon>
<ion-icon name="tablet-landscape-outline" onclick="myFunctionB()"></ion-icon>
<ion-icon name="phone-portrait-outline" onclick="myFunctionC()"></ion-icon>
</div>
</nav>
<center>
<iframe src="https://codingpoint0.blogspot.com/"
title="my-website"
class="website-show"
id="website-show">
</iframe>
</center>
</section>
<script>
function myFunctionA() {
document.getElementById("website-show").style.width = "1024px";
}
function myFunctionB() {
document.getElementById("website-show").style.width = "768px";
}
function myFunctionC() {
document.getElementById("website-show").style.width = "400px";
}
</script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js">
</script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js">
</script>
</body>
</html>
CSS CODE
* {
padding: 0;
margin: 0;
box-sizing: border-box;
outline: none;
border: none;
text-decoration: none;
transition: .3s linear;
}
html {
font-size: 62.5%;
overflow: hidden;
scroll-behavior: smooth;
scroll-padding-top: 9rem;
}
html::-webkit-scrollbar {
width: .8rem;
}
html::-webkit-scrollbar-track {
background: transparent;
}
.main {
width: 100%;
height: auto;
background: #eee;
}
.navbar {
width: 100%;
padding: 10px 5%;
display: flex;
align-items: center;
justify-content: center;
background: #00000071;
}
.icon ion-icon {
font-size: 30px;
padding: 10px 20px;
color: #fff;
cursor: pointer;
}
.my-website {
width: 100%;
height: 100vh;
overflow: auto;
}
Comments
Post a Comment