PX, EM or REM Media Queries? | Zell Liew
(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
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
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
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
Windows mobile media queries
When I met up with Malarkey right before An Event Apart in Seattle he told me about a quick bit of guerrilla testing he had been doing. He popped into a store selling Windows Phone 7 devices and started surfing the web. Specifically, he started looking at sites using responsive design like Jon’s and Colly’s. Most of the sites he looked at displayed the desktop layout instead of adapting to the sma
Awesome Media Queries in JavaScript - enquire.js
The Lowdown What is it? enquire.js is a lightweight, pure JavaScript library for responding to CSS media queries. JavaScript callbacks for media queries matching and unmatching. Clean & intuitive API Absolutely tiny - around 0.8kb minified & gzipped! Why should I use it? In responsive design, CSS media queries can only take you so far. enquire.js allows you to harness media queries in JavaScript,
Media Query splitting | simurai
When Media Queries got introduced and people started out with Responsive Web Design, I used to overwrite my Desktop styles to make it fit on Mobile. Later I shifted to “Mobile first” where you start out with the Mobile styles and overwrite them for Desktop sizes. But on a recent project I’ve started using a different approach by splitting the styles instead of overwriting them. It goes something l
Respond.jsとレスポンシブWebデザインをめぐるベストプラクティス議論 | ゆっくりと…
2012年2月、Modernizr 2.5 の カスタム・ビルダー から Respond.js が外されました。理由は、HTML5 Boilerplate （以下 H5BP） コミュニティでの決定です。Respond.js は、IE8 以下などのメディアクエリ未対応なブラウザにもその代替え機能を提供するスクリプトで、レスポンシブ Web デザイン を支えるスクリプトとして、H5BP に長らく （8ヶ月） 採用されてきた経緯があります。 ではなぜ、Respond.js は外されたのでしょう？ 今回は、その決定を下した長～い議論 Issue #816: Revert mobile-first media queries and remove respond.js から、ベスト・プラクティスの要点と、Paul Irish の考える H5BP の理想像を読み解いてみたいと思います。 ヘタクソで読み
Responsive Web Design
The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must 'accept the ebb and flow of things.' John Allsopp, “A Dao of Web Design” The English architect Christopher Wren once quippe
メディアクエリー
この文書は「Media Queries (W3C Recommendation 19 June 2012)」の日本語訳である。日本語訳は参考情報であり、公式な文書ではない。また、翻訳に誤りがある可能性にも注意されたい。 原文の最新版 は、この日本語訳が参照した版から更新された可能性がある。他の仕様の訳については Web 標準仕様 日本語訳一覧 を参照されたい。 公開日: 2012-06-29 翻訳者: 矢倉 眞隆 <yakura-masataka@mitsue.co.jp> メディアクエリー 2012 年 6 月 19 日付 W3C 勧告 (Recommendation) この版: http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/ 最新版: http://www.w3.org/TR/css3-mediaqueries/ 最新
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Jonathan T. Neal | Thoughts on Media Queries for Elements
Dealing with IE
JavaScript でメディアクエリを行う window.matchMedia の使い方
Contact Support