background preloader

Media Queries for Standard Devices

Media Queries for Standard Devices
If you think responsive's simple, I feel bad for you son. We got 99 viewports, but the iPhone's just one. —Josh Brewer, March 10, 2010 A major component of responsive design is creating the right experience for the right device. With a gazillion different devices on the market, this can be a tall task. We've rounded up media queries that can be used to target designs for many standard and popular devices that is certainly worth a read. If you're looking for a comprehensive list of media queries, this repository is a good resource. If you're reaction to this is: you should never base your breakpoints on devices!! Phones and Handhelds iPhones Galaxy Phones HTC Phones Nexus Phones Tablets iPads Galaxy Tablets Nexus Tablets Kindle Fire Laptops Media Queries for laptops are a bit of a juggernaut. Wearables Yes, we're going there. Apple Watch /* ----------- Apple Watch ----------- */ @media (max-device-width: 42mm) and (min-device-width: 38mm) { } Moto 360 Watch

Related:  CSS-TrickswebpageApprendre les CSSWorkaholicsCSS

How to Code a Stylish Portfolio Design in HTML/CSS Over on my Blog.SpoonGraphics design blog this week, I posted a Photoshop design tutorial that takes you through the process of building a stylish portfolio design concept. Follow this second part of the tutorial here on Line25, where we’ll code up the design into a fully working HTML and CSS website. Stick around for part three, when we’ll go a step further and convert the static website into a WordPress build. If you missed the post on Blog.SpoonGraphics, head over to find out how this design was put together in Photoshop. When you’re ready, continue on to start part two: The HTML and CSS. View part one: Creating the PSD concept

Keyframe Animation Syntax Basic Declaration & Usage For the sake of brevity the rest of the code on this page will not use any prefixes, but real world usage should use all the vendor prefixes from above Multiple steps If an animation has the same starting and ending properties, one way to do that is to comma-separate the 0% and 100% values: Or, you could always tell the animation to run twice (or any even number of times) and tell the direction to alternate. Design / Dev Feed #18 A weekly collection of design and development goodies - issue #18, featuring Material Design Audio Player, Landscape Parallax Using CSS, Tab Menu Overlay, Login Box Concept, Fullscreen Slideshow, CSS Inbox User Interface, Grid Item Animation Layout, CSS Non-WebGL Globe Demo, Circular Fly-Out Navigation Menu and more. Material Design Audio Player by Michael Landscape Parallax Using CSS by Dave Chenell Tab Menu Overlay by Ettrics Fullscreen Slideshow by Nikolay Talanov Based on Box Concept by Jamie Coulter Grid Item Animation Layout via Codrops A responsive, magazine-like website layout with a grid item animation effect that happens when opening the content.CSS Inbox User Interface by Jamie Coulter CSS Non-WebGL Globe Demo by Edan Kwan Using PerspectiveTransform.js and visual trick to create a 3D CSS globeA Pen by Amelia Wattenberger Circular Fly-Out Navigation Menu Video Mag Cover by Krz Szzz Using YouTube API & greensock tweening (hover corners of the mag to see it moving).

Media Queries Abstract HTML4 and CSS2 currently support media-dependent style sheets tailored for different media types. For example, a document may use sans-serif fonts when displayed on a screen and serif fonts when printed. ‘screen’ and ‘print’ are two media types that have been defined. Media queries extend the functionality of media types by allowing more precise labeling of style sheets. How to build a responsive HTML5 website - a step by step tutorial Rating: 8.6/10 (1247 votes cast) Required knowledge level: intermediate In this responsive web design tutorial we will create an awesome responsive HTML5 website starting from scratch. I tried to include as many different features as possible, so we will be dealing with a jQuery slider, CSS3 transitions and animations, CSS Media Queries and so on. This part of the tutorial will show you the HTML structure and the required scripts in a step by step tutorial. The second part will then show you how to style it using CSS3 features to create this stunning HTML5 cross-browser responsive website.

12 Awesome CSS3 Features That You Can Finally Start Using Martin Angelov If you are like me, when you see an impressive demo of a new CSS3 feature, you can’t wait to start using it in websites. Of course, then you see that it is available in only one or two of the major browsers (and this never includes IE), so ultimately you decide to wait. I have good news for you – with the latest browser releases, there are a few awesome features that are finally supported everywhere, and you can start using them right now! A word of caution – most of these features will not work in older versions of IE (9 and below).

After Three Decades of Obscurity, Helvetica’s Successor Reemerges A positive film master for Haas Unica (courtesy Monotype) When Haas Unica was introduced in 1980, it was intended as an illustrious successor to the highly popular sans-serif Helvetica. Before it could achieve any measure of Helvetica’s ubiquity, Haas Unica was left behind in the shift from phototypesetting to desktop publishing. Earlier this month, Neue Haas Unica was finally released by Monotype, making the long obscure typeface widely available for the first time. A pencil drawing for film for Haas Unica (courtesy Monotype) (click to enlarge) CSS Responsive Breakpoints & Media Queries 29-Aug-2012 Adaptations Tutorials Home | Adaptations Home | Adaptations Examples PVII Adaptations produces responsive Web pages that automatically adjust to the size of the browser window or the type of device being used. It even adapts to the orientation—portrait or landscape—of your mobile device. The adaptable and responsive nature of Adaptations is driven by CSS3 Media Queries, which allow us to tailor the layout based upon parameters expressed in each query. Each Adaptations page you create is linked to a core CSS file and a response CSS file.