HTML a media

[Claritas]

I was reading the reference (http://www.w3schools.com/tags/att_a_media.asp) and I've got a few question.

 

- What is the difference between width and device-width and when are we using them?

- What is the difference between aspect-ratio and device-aspect-ratio and when are we using them?

- What is the difference between bits per color and number of colors and when are we using them?

- What is a monochrome frame buffer, scanning method and grid or bitmap?

 

Thanks for the anwers.

[Ingolme]

The difference between width and device-width is that width refers to the width of the window and device-width refers to the width of the screen on the device. Mobile phones can be up to 1080 pixels wide, but they tell browsers that their device width is 320 or 375 pixels.

 

The aspect ratio is the same. aspect-ratio revers to the width:height ratio of the window, while device-aspect-ratio refers to the aspect ratio of the screen. The window might not take up the full screen, sometimes there's a status bar or something at the top of the screen taking up space and making the window smaller.

 

Colors are represented as numbers, which can be represented as a series of bits. Most software provides 8 bits per color, or 256 levels of each color, but screens can have a lot more precision than that, it just isn't always necessary. As a web developer you shouldn't have to worry about that, it's just an option in case you want to show a different color for screens that don't have enough color depth, which has not been a problem for any screen for the last 20 years.

 

Monochrome refers to a device that only can display values of one color. It's usually represented as shades of grey, but could be shades of whichever color the screen was built in as long as it's just one color.

 

The scanning method refers to how frames are rendered. On very primitive screens, each frame would only render every second line of pixels so they could render the images faster. It would alternate between even and odd lines on each frame. This method is called "interlacing". This is no longer necessary because cabled can transmit large amounts of data very quickly and LED monitors are much faster at refreshing than CRT monitors.

 

I'm not entirely sure what grid is, but I think it refers to the data being two dimensional. A bitmap is a long monodimensional string of data about the values on each pixel of the screen.

 

Media queries were designed to allow the developer to support a wide variety of devices, including very primitive ones that aren't used anymore. You won't be needing most of them.

[Claritas]

What does it mean to be two dimensional? May you give me an example for it?

[Ingolme]

I'm not entirely sure what grid means, the data being two-dimensional is just speculation. I'm probably completely wrong on that.

 

A mono-dimensional list of data looks like this:

[1, 2, 3, 4]

 

A two-dimensional list of data could look like this:

[1, 2]

[3, 4]