Library for easy use of media breakpoints in js
-
Updated
Oct 29, 2017 - JavaScript
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)_
Library for easy use of media breakpoints in js
Laboratoria - Sprint 3 - Challenge: make images fit the screen size
Práticas do livro Web Design Responsivo
Library to control the design of your application using media queries 🔥
A study of advanced CSS techniques using Responsive Design and Preprocessing. We studied how to use the viewport meta tag, media queries, setting up a preprocessor, and advanced use of preprocessing techniques. The goal of this project was to demonstrate proficiency by updating a website that is missing content as well as adding mobile styling. / …
A responsive landing page of Netflix Official website, as per May 2019.
GitHub Pages link for Responsive-Portfolio
A simple Tic Tac Toe game!
Сайт "Путешествие по России"
Только HTML & CSS
Horiseon is a responsive website created using pure CSS and HTML. To create responsiveness the site utilizes the display flex and float properties supplemented by the media queries of 1025px, 920px, 560px, 480px, and 425px. Each media query contains custom code for the designated pixel layout.
База клиентов с небольшой самописной библиотекой для взаимодействия с dom и CRUD операциями. Выполнен в рамках тестового задания
This is a recipe blog template that highlights step by step how to cook some type of food. The audience will be guided right from the ingredients to the amount needed.
Tela de cadastro de usuário, com design inspirado no site da plataforma de educação em tecnologia, rocketseat.
This is a responsive landing page by using HTML and CSS .The advanced features have been used here. Like, animation,transition,transform,media query,HTML semantic tags etc.
Created by Håkon Wium Lie, W3C
Released June 19, 2012