| /* | |
| ##Device = Desktops | |
| ##Screen = 1281px to higher resolution desktops | |
| */ | |
| @media (min-width: 1281px) { | |
| /* CSS */ | |
| #! /usr/bin/python | |
| # -*- coding: utf-8 -*- | |
| # @author weishu @2015/12/7 | |
| import subprocess | |
| import os | |
| import re | |
| import json |
| // http://paulirish.com/2011/requestanimationframe-for-smart-animating/ | |
| // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating | |
| // requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel | |
| // MIT license | |
| (function() { | |
| var lastTime = 0; | |
| var vendors = ['ms', 'moz', 'webkit', 'o']; |
| /* | |
| Based on: | |
| 1. http://stephen.io/mediaqueries | |
| 2. https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ | |
| */ | |
| /* iPhone 6 in portrait & landscape */ | |
| @media only screen | |
| and (min-device-width : 375px) | |
| and (max-device-width : 667px) { |
| <html> | |
| <head> | |
| <style> | |
| .viewport { | |
| position: relative; | |
| width: 300px; | |
| height: 300px; | |
| } | |
| .viewport:hover img { |
| /** | |
| * Compares two software version numbers (e.g. "1.7.1" or "1.2b"). | |
| * | |
| * This function was born in http://stackoverflow.com/a/6832721. | |
| * | |
| * @param {string} v1 The first version to be compared. | |
| * @param {string} v2 The second version to be compared. | |
| * @param {object} [options] Optional flags that affect comparison behavior: | |
| * <ul> | |
| * <li> |
An ongoing project to catalogue all of these sneaky, hidden, bleeding edge selectors as I prepare my JSConf EU 2012 talk.
Everything is broken up by tag, but within each the selectors aren't particularly ordered.
I have not tested/verified all of these. Have I missed some or got it wrong? Let me know. - A
A friendly reminder that you may need to set this property on your target/selected element to get the styling results you want:
-webkit-appearance:none;
| @mixin for-size($range) { | |
| $phone-upper-boundary: 600px; | |
| $tablet-portrait-upper-boundary: 900px; | |
| $tablet-landscape-upper-boundary: 1200px; | |
| $desktop-upper-boundary: 1800px; | |
| @if $range == phone-only { | |
| @media (max-width: #{$phone-upper-boundary - 1}) { @content; } | |
| } @else if $range == tablet-portrait-up { | |
| @media (min-width: $phone-upper-boundary) { @content; } |
| @mixin for-size($size) { | |
| @if $size == phone-only { | |
| @media (max-width: 599px) { @content; } | |
| } @else if $size == tablet-portrait-up { | |
| @media (min-width: 600px) { @content; } | |
| } @else if $size == tablet-landscape-up { | |
| @media (min-width: 900px) { @content; } | |
| } @else if $size == desktop-up { | |
| @media (min-width: 1200px) { @content; } | |
| } @else if $size == big-desktop-up { |
| @mixin for-phone-only { | |
| @media (max-width: 599px) { @content; } | |
| } | |
| @mixin for-tablet-portrait-up { | |
| @media (min-width: 600px) { @content; } | |
| } | |
| @mixin for-tablet-landscape-up { | |
| @media (min-width: 900px) { @content; } | |
| } | |
| @mixin for-desktop-up { |