Slice media queries with ease
-
Updated
Jan 6, 2023 - SCSS
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)_
Slice media queries with ease
📐📱💻🖥️ A method of fluidly resizing in various devices based on visual angle. (with SASS) 💞 👀
Sass functions and mixins to use media queries rules.
SASS Media queries on a single line
A playbook is a static online gaming store like STREM, EPIC game, etc, Fully responsive and interactive with item filtration feature. You can promote your games as well as increase your business.
CSS Basics
Evaluación final de Maquetación del Módulo 1 del bootcamp de Desarrollo front-end de @Adalab.
First project in Adalab to show the team members information, with 2 pages: Home (team info), and Contact page (containing a contact form). We include additional features such as personal style (Stranger Things theme and animated logo) and use of english language.
SPRINT 1: PODCATS LADING PAGE
Hello, My name is Zain Sadaqat and this is my first module's capstone project in microverse. In this project, I've used HTML, CSS, JS best practices and apply DRY principle. This project is all about cyber security seminar / conference.
A simple Stats preview card component code challenge to Frontend Mentor
Trabalho proposto para o curso técnico em informática, do Senac RS com auxílio do professor Fabrício Esmério
👌🚀 Finally Make a Education Website For Foreign Language ( Japanase-Language ) Used ✌️SASS/SCSS ( Nesting ) & HTML5 😊( Semantic Code or DOM Structure ), CSS3 ( Flex-Box )
This is my adaptation of the Module 1`s final test aimed to develop a landing page under a given design and to resolve several points. I have used the project I created as an entrepreneur: Glamping Al-Andalus.
This project taught by Jonas Schmedtman helped me become familiar with flexbox in CSS and how it can simplify alignment with properties, especially compared to older methods such as floats. I also learnt about SVGs, the 'sprite' file and how its used to store multiple icons in code, rather than dozens of images in a single file.
I have created a Temperature Converter (Celsius - Fahrenheit). Project is based on HTML, CSS/Sass and JavaScript.
a fully responsive website using Html, Sass, and Javascript
Created by Håkon Wium Lie, W3C
Released June 19, 2012