Jump to content

Recommended Posts

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


- 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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

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]

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...