this is a project from FreeCodeCamp.org Responsive web design course, it's a simple form using html and css only(no javascript or frameworks included)
-
Updated
May 28, 2024 - CSS
Media Queries are a way to target browsers by certain characteristics, features, and user preferences, then apply styles, or run other code based on those things. They are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse. Media queries are used for the following:
@media
and @import
at-rules<style>
, <link>
, <source>
, and other HTML elements with the media=
attributeWindow.matchMedia()
and EventTarget.addEventListener()
methodsA media query is composed of an optional media type and any number of media feature expressions, which may optionally be combined in various ways using logical operators.
* **all:** Suitable for all devices.
* **print:** Intended for paged material and documents viewed on a screen in print preview mode.
* **screen:** Intended primarily for screens.
* **Viewport/Page Characteristics**
* **Display Quality**
* **Color**
* **Interaction**
* **Video-prefixed:** The spec references user agents, including TVs, that render video and graphics in two separate planes that each have their own characteristics. _(upcoming Media Queries Level 5)_
this is a project from FreeCodeCamp.org Responsive web design course, it's a simple form using html and css only(no javascript or frameworks included)
Svelte component and helper functions for creating easy responsive layouts with CSS media queries.
A landing page about educational techniques and statistics in teaching.
Time Tracking Dashboard build using React.js and CSS with responsive layout
一款 PostCSS 插件,将固定尺寸的视图转为可跟随宽度变化而等比例伸缩的视图。To adapt different displays by one mobile viewport.
A landing page about traveling.
Webpage responsiveness using CSS Media Queries
✨ Responsive pages ✨
Simple and powerful breakpoints for styled components and emotion.
CSS Media Queries for Desktop, Tablet, Mobile.
This my Personal portfolio web..
DevFolio is a free portfolio website html template created with the Bootstrap framework. Whether you are a creative individual, developer or artist DevFolio will serve you well. Create a unique online portfolio, resume or just personal website with this elegant and easy to use bootstrap template.
Netflix Progressive web app and Android Capacitor with react.js
Fullstack Node JS - Project
This project is an Instagram clone built as a full-stack web application, featuring a React front end and Firebase backend.
Signup form with valid email check and success popup window using React and some media queries with Dark Mode enabled
Minimalist warehouse management & presentation system frontend for Photon Pictures at UIUC
Created by Håkon Wium Lie, W3C
Released June 19, 2012