Media Queries for Standard Devices | CSS-Tricks
This page lists a ton of different devices and media queries that would specifically target that device. That’s probably not generally a great practice, but it is helpful to know what the dimensions for all these devices are in a CSS context. UGURUS by DigitalOcean for agency owners UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerato
Touch Devices Should Not Be Judged By Their Size | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Front-end developers and web designers live in an insane multi-device reality. A few months ago, the Red Hat UXD team discussed how to design enterprise applications for mobile environments. Sarah and Jenn, my talented colleagues, pointed out that touch devices should not be judged by their
PX, EM or REM Media Queries? | Zell Liew
Have you wondered if you should use px, em or rem for media queries? I had the same question too, and I never figured it out, not till now. When I first created the mappy-breakpoint library, I used rem units. Then after a conversation with Sam Richard, I quickly switched to em instead because I found out there isn’t a difference between the two. In addition to em and rem, a popular unit of choice
7 Habits of Highly Effective Media Queries
As we all know, media queries are responsive design’s secret sauce. Here are some considerations for crafting high-quality media queries: Let content determine breakpoints Treat layout as an enhancement Use major and minor breakpoints Use relative units Go beyond width Use media queries for conditional loading Don’t go overboard Let content determine breakpoints Every time you see 320px, 480px, 76
Logic in CSS Media Queries (If / Else / And / Or / Not) | CSS-Tricks
Just in case you have brain farts about the logic in CSS media queries about this constantly, as I do. If That’s what media queries are: logical if statements. “If” these things are true about the browser, use the CSS inside. /* IF the viewport is 550px or smaller, do this */ @media (max-width: 550px) { html { background: hsl(0 0% 0% / 0.5); } } Media Queries Level 4 allows for a comparison syntax
Enquire.js - Media Query Callbacks In JavaScript | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! The following is a guest post Nick Williams. Nick emailed me about a new library he created to assist in working with responsive design. Specifically, he was implementing an idea he found here on CSS-Tricks but wanted to do so more intelligently by only running the script when needed. Thus t
Working around a lack of element queries | Filament Group, Inc.
Lately, we’ve been running into a recurring dilemma when building responsive designs. We want to build responsive layouts comprised of many modular, independent HTML components that fluidly fill any layout container we drop them into, but CSS3 media queries don’t currently offer a way to make content respond to its container’s dimensions (as opposed to the overall viewport size). Nearly all of the
Blinkでメディアクエリーのwidth/heightがスクロールバーを含むように - fragmentary
Chrome 28がBetaに移った。表面上とくに違いはないだろうけれど、BlinkなChromeですよ。 さて、タイトルで言ったとおりの変更がBlinkに行われた。 144cc4f (@149832) - chromium/blink — Include scrollbar size in @media width/height M28に入るかなと思って試したんだけど、そう動かなかったのでこれはM29からになりそう。Stableまでは3ヶ月ほど猶予があるから、入らなくてよかったかも。 ええと、どういうことかというと、もし、 RWDなどメディアクエリーを使うサイトを作っていて クエリで width (あるいは height) を使っていて ChromeもしくはSafariをメインに作っていて そのサイトをFirefox, Opera, IEでテストしていない という場合、ブレークポイント前
Media Queries are a Hack by Ian Storm Taylor
The big buzzwords in CSS these days are “modular” and “responsive”—and for good reasons. But we’re still trying to achieve those goals with the wrong tool: Media Queries. What we really need is a tool that doesn’t exist yet: Element Queries. This is without a doubt the biggest problem I run into while working on Segment. I want to write modular components that I can re-use all over our site, and e
Responsive Web Design With Physical Units — Smashing Magazine
Today there’s no way to accurately design for the Web using physical units, nor will there be for a very long time. But there is a way to design while knowing the physical characteristics of the device. It’s called the “resolution media query”, and it’s been in the specification for media queries for some time. So, how will we use this nifty little feature, exactly? Here’s how. This post should be
さらばmozとoのdevice-pixel-ratio - fragmentary
そういえば、Firefox 16とOpera 12.10からメディアクエリーのresolutionとdppxが使えるのを思い出した。 これらを使うと、Retina displayはじめ高密度なディスプレイに対応するコードがけっこう短くなる。 これまではこんな感じ。 @media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1) { .foo { background-image: url(image-2x.png); } } } device-pixel-ratioはもともとWebKitの拡張だったもの。それをMozillaとOperaも取り入れたのだけど、ベンダー接頭辞の面倒さに加えてmin-/max-のつき方、値の書き方がばらばら
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Re-evaluating px vs em in Media Queries
Making sense of units in CSS Media Queries (in the year 2019) · Dan Cătălin Burzo
Dev.Opera — Interaction Media Features and their potential (for incorrect assumptions)
Handling of `rem` in Media Queries
GitHub - aaronjensen/sass-media_query_combiner
GitHub - buildingblocks/grunt-combine-media-queries: [DEPRECATED] A new version is managed here: https://github.com/frontendfriends/grunt-combine-mq![GitHub - buildingblocks/grunt-combine-media-queries: [DEPRECATED] A new version is managed here: https://github.com/frontendfriends/grunt-combine-mq](https://cdn-ak-scissors.b.st-hatena.com/image/square/9e09101ebe9dfb2d0ed9c1f0578feabce9452d89/height=288;version=1;width=512/https%3A%2F%2Fopengraph.githubassets.com%2F8c211702c9e1bcce5f9ed68217e0174fed8a7f736578106fca6e1e783d3e00ca%2Fbuildingblocks%2Fgrunt-combine-media-queries)
culture27.com
Jonathan T. Neal | Thoughts on Media Queries for Elements
Dealing with IE