Reframe.js is a javascript plugin that makes unresponsive elements responsive. This is a video… that shows cute cats… in a perfect ratio at any size… because Reframe.js is awesome!
Reframe.js makes unresponsive elements responsive
Reframe.js is a javascript plugin that makes unresponsive elements responsive. This is a video… that shows cute cats… in a perfect ratio at any size… because Reframe.js is awesome!
Media Queries（メディアクエリ）とJavaScriptの連携について - Qiita
レスポンシブのサイトの制作を行っていると、PCとTABとSPのそれぞれのレイアウトでそれぞれ別々のJSの動作をさせたいということがあると思います。それを実現するためにはJavaScript側から今どのレイアウトになっているのかという事を知る必要があります。 そこで今回はJavaScriptでのメディアクエリの判定方法についてご紹介します。 まずはやってしまいがちなNGパターン、続いてOKパターンをいくつかご紹介します。 NGパターン jQueryのwidthメソッドを使用して判定 OKパターン window.innerWidthプロパティを使用して判定 window.matchMediaメソッドを使用して判定 PC/SP時に表示/非表示にするコンテンツの表示/非表示の状態を読み取って判定 contentの値を使用して判定 font-familyの値を使用して判定 NGパターン まずはやって
Flickity v2 · Touch, responsive, flickable carousels
Install Download CDN Package managers License Commercial license Open source license Getting started Initialize with jQuery Initialize with vanilla JavaScript Initialize with HTML Next Feature showcase wrapAround freeScroll groupCells autoPlay lazyLoad Parallax Images View all options Flickity in use People like Flickity Install Download CSS: flickity.min.css minified, or flickity.css un-minified
How to react to changing environments using matchMedia | 4waisenkinder
I was at my parents place over Christmas. Besides eating the whole day and playing board games I tried to read two books I brought with me. One of the books was RESPONSIBLE RESPONSIVE DESIGN by Scott Jehl. It was released recently and it is a really good read. I have not finished it yet, but I enjoy it and it is for sure in the TOP5 list of my favourite books about responsive web design. In the wo
Responsive Components Using Context Queries
Media queries make a website respond to the viewport. But what if we could make site components respond to their container? Warning! The post you are viewing is out of date and almost certainly no longer accurate. For more topical posts, check out the “related reading” at the bottom of this page or drop me an email with any questions. I’ve been having a play with the idea of determining the contex
Chartist - Simple responsive charts
You may think that this is just yet an other charting library. But Chartist.js is the product of a community that was disappointed about the abilities provided by other charting libraries. Of course there are hundreds of other great charting libraries but after using them there were always tweaks you would have wished for that were not included. Get awesome Dashboard Templates by Creative TimAre y
[JS] window.matchMedia をつかって JavaScript のコードをレスポンシブに分ける方法
JavaScript のメソッド window.matchMedia を使用すると、CSS3 の MediaQuery のようにウィンドウサイズで JavaScript のコードを分けて使用する事が可能です。window.matchMedia の使い方・対応ブラウザなどのメモです。 window.matchMedia は MediaQueryList オブジェクト（MediaQueryList – Web API インターフェイス | MDN）を返すメソッドです。 サンプルデモまでのリンク→ウィンドウサイズによってテキストの内容を変更するサンプルデモ 使い方 matches でウィンドウサイズとマッチするかを簡単に調べる matches プロパティを使うと、指定したウィンドウサイズとマッチしたら true マッチしなければ false を返してくれます。ウィンドウサイズの指定の仕方は CS
![[JS] window.matchMedia をつかって JavaScript のコードをレスポンシブに分ける方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/d4a1ab350b11240c268ad4418373b07e790b15b0/height=288;version=1;width=512/https%3A%2F%2Fmemocarilog.info%2Fwp-content%2Fuploads%2F2014%2F08%2Fmediaquery.png)
How to Use Wordpress Tutorial | Step by Step Guide [2020]
What’s up y\'all! More the reading type? Looking to start a website? The post: WordPress is definitely a solid choice for creating awesome, professional websites. Now you’ve just got to figure out how to use WordPress… Good news: as always, we’ve got your back fam! Here we’ve got a complete walkthrough of one of the best tools for building a website best website builders around including what you
![How to Use Wordpress Tutorial | Step by Step Guide [2020]](https://cdn-ak-scissors.b.st-hatena.com/image/square/c278458ab026dd0af5af6403795f2ecc9ac6c0f7/height=288;version=1;width=512/https%3A%2F%2Fcreateaprowebsite.com%2Fwp-content%2Fuploads%2F2020%2F01%2Fcapw-featuered-graphic-how-to-use-wordpress.jpg)
Responsive Equal Height Blocks by Osvaldas Valutis
Update: after publishing this post I received some useful feedback from the community and wrote a new post with much smarter solution to the problem. I recommend you reading Flexbox Based Responsive Equal Height Blocks With JavaScript Fallback instead._ When I was designing Readerrr’s features page, I wanted to put the features list content in a semantic markup, i.e. <ul>, <li>, and to have two li
Molten Leading
Manually adjusting line-height with media queries for optimum readability across vast number of screen sizes can be hard. What makes it even harder, is, that instead of the screen width, the line-height should be relative to its container’s width and its font settings in order to achieve proper readability and appropriate spacing. Thanks to @Wilto, there has been a jQuery plugin called “Molten Lea
アイコンの実装方法
ウェブページにおけるアイコンの実装方法はさまざまです。マークアップに img 要素を配置する方法もあるし、CSS から背景画像やアイコン・フォントを使う方法もあります。そういった中からどの方法を採用すべきかを判断するには、HTML Standard の Requirements for providing text to act as an alternative for images にあるとおり、「そのアイコンの意味を伝えるテキストが付随するかどうか」を考える必要があります。 テキストが付随しないアイコン 家のアイコンだけでホームページへのリンクを表す場合など、ラベルとしてのテキストが存在しないアイコンは、自分自身でその意味を伝える必要があります。こういったアイコンの実装方法は限られていて、ほぼ 1 つしかありません。alt 属性に代替テキストとしてラベルを指定した img 要素をマー
Responsive & Fixed One Page Nav
Adtile Technologies wrote this on Mar 3, 2014 Today, we are open sourcing the JavaScript code and the assets we used to build the above functionality for our new website. The code and examples are hosted on GitHub and can be found from here. There’s a live example too, under our site, give it a spin. Below is a list of some of the features provided: Fixed Nav Features Fixed positioned, always vis
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ALL | Navnav
GitHub - Snugug/eq.js: Lightweight JavaScript powered element queries
Checking Media Queries With Javascript
Web Fundamentals — Google Developers
http://www.csskarma.com/blog/responsive-javascript/
http://flippinawesome.org/2014/03/24/using-media-queries-in-javascript/
The Command Line Rosetta Stone