RESPONSIVE SCREENS

Developer
Julien Lepoivre
Size
2,675 Kb
Views
24,288
  1. RESPONSIVE SCREENS Previews
  2. RESPONSIVE SCREENS HTML Codes
  3. RESPONSIVE SCREENS CSS Codes
  4. RESPONSIVE SCREENS JS Codes

How do I make an responsive screens?

YOUR WIDTH OF SCREEN WITH SOME EXPRESSIVES TEXTS. What is a responsive screens? How do you make a responsive screens? This script and codes were developed by Julien Lepoivre on 02 October 2022, Sunday.

RESPONSIVE SCREENS Previews
IQ Test

RESPONSIVE SCREENS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>RESPONSIVE SCREENS</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h2></h2>
<a href='#' class="arrow left"></a>
<a href='#' class="arrow right"></a>
<!-- JavaScript -->
<p> <span id="jsWidth">0</span>px <!--<span id="jsHeight">0</span>-->
</p>
<br/> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

RESPONSIVE SCREENS - Script Codes CSS Codes

body{ text-align:center; font-size:55px; padding-top:50px;
}
.arrow{ position:absolute; top:50%; margin-top:-50px; }
.arrow.left{ left:35%; clip:rect(-30px, 48px, 130px, -23px); }
.arrow.right{ right:35%; clip:rect(-40px, 123px, 130px, 50px); }
.arrow::before{ content:''; display:block; padding:50px; box-shadow:0 0 0 2px #DFA0B5 inset; cursor:pointer; -webkit-transform:rotate(-45deg); transform:rotate(-45deg); transition:.3s; }
.arrow:hover::before{ box-shadow:0 0 0 4px #FFF inset; }
/* Basic page reset for this demo
--------------------------------------*/
html{ height:100%; font-family: 'Roboto Condensed'; }
body{ min-height:100%; background:radial-gradient(#D65C86, #993455); background:-webkit-radial-gradient(#D65C86, #993455); }
*{ margin:0; padding:0; }
#jsWidth{ text-align:center; color:white;
}
h2:before{ font-size:24px; top:0px; position: ; text-align:center; content:'petite est votre fenetre';
}
/* Large screens ----------- */
@media only screen
and (min-width : 320px) {
h2:before{content:'iPhone';}
}
/* Large screens ----------- */
@media only screen
and (min-width : 600px) {
h2:before{content:'MOYEN';}
}
/* Large screens ----------- */
@media only screen
and (min-width : 800px) {
h2:before{content:'THE TRADITIONNAL';}
}
/* Large screens ----------- */
@media only screen
and (min-width : 960px) {
h2:before{content:'VGA';}
}
/* Large screens ----------- */
@media only screen
and (min-width : 1280px) {
h2:before{content:'HD READY';}
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
h2:before{content:'large';}
}
/* Large screens ----------- */
@media only screen
and (min-width : 1920px) {
h2:before{content:'FULL HD !!!';}
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

RESPONSIVE SCREENS - Script Codes JS Codes

// JavaScript
function jsUpdateSize(){ // Get the dimensions of the viewport var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; document.getElementById('jsWidth').innerHTML = width; document.getElementById('jsHeight').innerHTML = height;
};
window.onload = jsUpdateSize; // When the page first loads
window.onresize = jsUpdateSize; // When the browser changes size
/*// jQuery
function jqUpdateSize(){ // Get the dimensions of the viewport var width = $(window).width(); var height = $(window).height(); $('#jqWidth').html(width); $('#jqHeight').html(height);
};
$(document).ready(jqUpdateSize); // When the page first loads
$(window).resize(jqUpdateSize); // When the browser changes size
*/
RESPONSIVE SCREENS - Script Codes
RESPONSIVE SCREENS - Script Codes
Home Page Home
Developer Julien Lepoivre
Username BigPepper
Uploaded October 02, 2022
Rating 3
Size 2,675 Kb
Views 24,288
Do you need developer help for RESPONSIVE SCREENS?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Julien Lepoivre (BigPepper) Script Codes
Name
A Pen by Julien Lepoivre
Reactive Background
Pure CSS Facebook IOS ICON
CSS3 Working Clock
Realtime Delaunay Triangulation
BIGPEPPER THEME WIP
Made For Codepen
Hello Pepper Plane
Biru framework ready
Tweet embed
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!