Skip to content

Logashree03/Screen-Width-Detector-UI

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 

Repository files navigation

📱 Screen Width Detector UI

A simple and interactive Screen Width Detector UI built using HTML, CSS, and JavaScript.
This project dynamically detects the screen width and displays the device type (Mobile, Tablet, Laptop, Desktop) with changing background images.


🚀 Live Demo

https://logashree03.github.io/Screen-Width-Detector-UI/


✨ Features

  • 📏 Detects screen width in pixels
  • 📱 Identifies device type (Mobile / Tablet / Laptop / Desktop)
  • 🖼️ Dynamically changes background images based on screen size
  • 🔄 Updates automatically on window resize
  • 📱 Fully responsive text using media queries

🛠️ Technologies Used

  • HTML5
  • CSS3
  • JavaScript (DOM & screen properties)
  • Media Queries
  • Google Fonts

📂 Project Structure

screen-width-detector-ui/ ├── index.html ├── style.css ├── index.js


📚 Learning Outcomes

  • Working with screen.width in JavaScript
  • DOM manipulation using JavaScript
  • Handling window resize events
  • Responsive design using media queries
  • Dynamic UI updates based on device size

📬 Contact


⭐ If you like this project, feel free to star the repository!

About

A responsive screen width detector built using HTML, CSS, and JavaScript that dynamically updates content and background images based on device size.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors