#mediaquery

WHY THE NEED FOR A RESPONSIVE WEB DESIGN ?

Prior to 2010, majority of websites were designed for desktop, laptops and other ‘large’ screen devices, but due to the proliferation of smart phones, tablets, and other mobile devices, users started opening websites on their phone browsers which wasn’t responsive enough at that time. Then, web developers came up with the idea of creating website in a more responsive manner, that will be compatible with different screen sizes.

An interactive map of screen sizes for responsive and adaptive design. It's a great visualisation but remember, there is no spoon.

 How I went about doing it.

It was king of a nightmare trying to make my website responsive because even though I was aware of achieving responsive design through media queries but I didn’t know really where to start. 

I went on W3schools so that I could understand the basics of using Media queries. The @media tag is used to let the browser know that the following code should only come into effect when the screen size reaches the width that you have set. The (max-width: 600px) tag means that when the screen is smaller than 600px, the CSS will then become active and any changes you have made inside these brackets will override the code above. 

This is a really good article that I came across, they go more in depth on media queries and it discusses what can be done with this. I was mainly looking for ideas on how to edit my own website so that it would work well. 

My own Website.

To make my own website work I introduced media queries and started to implement them into my CSS, I mainly focussed on my nav bar and the portfolio section because these were the two main sections that would, when shrunk down they would break and make the whole website look messy so I would make them smaller as the screen size got smaller making sure not to make the nav bar or the portfolio section look disjointed or out of place. 

These are the various screen sizes that needed editing and fixing to stop the website looking bad when squeezed to a certain point. I enjoyed doing this because it was new to me and I learned how to manage the CSS so that it could be viewed on multiple sized screens from phones to tablets and ofcoure desktops and laptops.

Problems I had.

I made the mistake of starting at the smallest screen and working my way up which could confuse you a lot and hamper the way that the original screen will look once you try and fix the main code. once I did this I was left with a huge amount of code that I got lost in because it quickly became me just trying to fix everything and salvage what was left of my website. 

レスポンシブなウェブサイトでJavaScriptを書く必要があったのだけど、 そこでwindow.matchMediaを使うとウィンドウサイズの変更を監視できることを知った。

var mql = window.matchMedia('screen and (min-width: 768px)');

とすると、mqlにMediaQueryListが返ってくる。 matchMedia関数にはCSSで書いているメディアクエリの文字列そのものが渡せる。

mql.matches;

とすると、メディアクエリの条件に一致していた場合にtrueになっている。一致していない場合はfalseになる。

MediaQueryListにはリスナー関数を登録できる関数があって、addListener関数を使うと登録できる。

mql.addListener(function(event) { event.matches; });

登録したリスナー関数は、メディアクエリの条件が変更されたときに呼ばれる。

これでわざわざwindow.onresizeを監視する必要がなくなる。

caniuseによるとIE9以下で使用できない以外は主要ブラウザは使用できるようだ。

Can I use matchMedia?

IE9以下でも使用したい場合はmatchMedia.jsのpolyfillを使う。

<!--[if lt IE 10.0]> <script src="matchMedia.js"></script> <script src="matchMedia.addListener.js"></script> <![endif]-->

で良いと思う。

addListenerのコードを呼んだ感じでは、resizeが起きてから30ms後に登録した関数が呼ばれるようだ。 常に監視などはしていないようなので、パフォーマンスへの影響はそこまで大きくないと思う。

参考：

メディアクエリ