ptg16476052Understanding the Mechanics of RWD 46316
The video.mp4 file was shot at 1920×1080, and although it will look fine on some
devices, it might be too big or too small for others. So, you can add in another video
recorded at 720×480 for smaller screens. To display the small version on small screens,
you use a media query right on the source tag:
Any browser that is wider than 480 pixels will automatically load and play the larger file
instead of the smaller one.
Building Responsive Tables
Data tables are a sensitive subject for responsive web designers because they are often
very big and can thus be difficult to handle on smaller screens. It can be tempting to add
display: none; to tables and only display them on larger screen sizes (by setting the
display back to table: display: table; inside the media queries), but that isn’t an option
if the table is required content.
Designers typically handle tables in RWD in three ways:
n Resize the cells.
n Rearrange the table.
n Remove or hide the content.Resizing the cells is the easiest way to handle tables because it’s the way that tables rear-
range themselves by default. First you should make the main table tag 100% in width: