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. Brought to you by DigitalOcean DigitalOcean has the cloud computing services you need to support your growth at any stage. Get started with a free $200 credi
Get 30% off on all hosting plans with Cloudways, a managed cloud hosting platform for WordPress and more. 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 si
(Hey, we're having problems showing images in RSS right now, so if you want a better reading experience, consider viewing this article online [here](https://zellwk.com//blog/media-query-units. We hope to fix this soon!). 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-breakpoi
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
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
Get affordable and hassle-free WordPress hosting plans with Cloudways, now offering 40% off for 4 months, and 40 free migrations. 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 scri
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
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でテストしていない という場合、ブレークポイント前
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
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
そういえば、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ページを開く