- Media queries have many features, but
min-width
is the most practical one, the one you should assume to use most of the time. - Only use
em
within media query definitions, never pixels. - Until there's wider
rem
support within media query,rem
should be avoided in media query definitions as well. - Assuming mobile is
320px
and the body font size is16px
, then the breakpoint indicating mobile width in profile orientation would be20em
(320/16). - Choose breakpoint values to serve the content, not to serve device deminsions.
- Never use media queries to define styles for the smallest viewport size.
- Use media queries to “enhance” or add or alter styles when the browser has a wider (or taller) vi
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var Shopify = Shopify || {}; | |
// --------------------------------------------------------------------------- | |
// Money format handler | |
// --------------------------------------------------------------------------- | |
Shopify.money_format = "${{amount}}"; | |
Shopify.formatMoney = function(cents, format) { | |
if (typeof cents == 'string') { cents = cents.replace('.',''); } | |
var value = ''; | |
var placeholderRegex = /\{\{\s*(\w+)\s*\}\}/; | |
var formatString = (format || this.money_format); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var cameraZ = camera.position.z; | |
var planeZ = 5; | |
var distance = cameraZ - planeZ; | |
var aspect = viewWidth / viewHeight; | |
var vFov = camera.fov * Math.PI / 180; | |
var planeHeightAtDistance = 2 * Math.tan(vFov / 2) * distance; | |
var planeWidthAtDistance = planeHeightAtDistance * aspect; | |
// or |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function(){const n=document.createElement("link").relList;if(n&&n.supports&&n.supports("modulepreload"))return;for(const l of document.querySelectorAll('link[rel="modulepreload"]'))r(l);new MutationObserver(l=>{for(const o of l)if(o.type==="childList")for(const u of o.addedNodes)u.tagName==="LINK"&&u.rel==="modulepreload"&&r(u)}).observe(document,{childList:!0,subtree:!0});function t(l){const o={};return l.integrity&&(o.integrity=l.integrity),l.referrerPolicy&&(o.referrerPolicy=l.referrerPolicy),l.crossOrigin==="use-credentials"?o.credentials="include":l.crossOrigin==="anonymous"?o.credentials="omit":o.credentials="same-origin",o}function r(l){if(l.ep)return;l.ep=!0;const o=t(l);fetch(l.href,o)}})();var Bi={exports:{}},br={},Hi={exports:{}},L={};/** | |
* @license React | |
* react.production.min.js | |
* | |
* Copyright (c) Facebook, Inc. and its affiliates. | |
* | |
* This source code is licensed under the MIT license found in the | |
* LICENSE file in the root directory of this source tree. | |
*/var Yt=Symbol.for("react.elemen |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
float raySphereIntersect(vec3 r0, vec3 rd, vec3 s0, float sr) { | |
// - r0: ray origin | |
// - rd: normalized ray direction | |
// - s0: sphere center | |
// - sr: sphere radius | |
// - Returns distance from r0 to first intersecion with sphere, | |
// or -1.0 if no intersection. | |
float a = dot(rd, rd); | |
vec3 s0_r0 = r0 - s0; | |
float b = 2.0 * dot(rd, s0_r0); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
module SpriteSheet exposing (..) | |
import Math.Vector2 exposing (Vec2, vec2) | |
import WebGL exposing (Texture, Shader) | |
{-| | |
Render a portion of a sprite sheet. | |
-} | |
fragmentSpriteSheet : Shader {} { u | spriteSheet : Texture, spriteSheetSize: Vec2, spriteSize: Vec2, index : Float } { vcoord : Vec2 } | |
fragmentSpriteSheet = |
Recommendations of unit types per media type:
Media | Recommended | Occasional use | Infrequent use | Not recommended |
---|---|---|---|---|
Screen | em, rem, % | px | ch, ex, vw, vh, vmin, vmax | cm, mm, in, pt, pc |
em, rem, % | cm, mm, in, pt, pc | ch, ex | px, vw, vh, vmin, vmax |