Introduction to Responsive Web Design
CSS tips and tricks for making your application look fantastic everywhere
Responsive Web Design: an approach to designing web content that responds to the constraints of different devices. This involves setting up page structure and CSS rules that are flexible to these differences.
The variety of screen sizes, resolutions, and processing power is vast. Just accounting screen size variations for popular iPhone and Android phones, there are over twenty various possibilities.
Media Queries
Media Queries were first introduced in CSS3. These queries allow us to set different layouts, determine what content is visible, and add stylist changes based on the users viewport size. Used along with CSS flexbox, a fully responsive web design can be set up rather quickly and intuitively.
Media queries consist of a media type and if that type matches the dimensions of the device the app is being viewed on, the appropriate changes/styles will be applied. You can add as many media queries as needed to accommodate various screen sizes.
Media queries can be used to check a variety of things, such as
- width and height of the viewport
- width and height of the device
- screen resolution
- orientation (example is a phone or tablet displaying portrait or landscape mode)
The below example demonstrates a media query that changes the font size of a <h1> as well as the font-size and background-color of a <p>, based on a max-width(anything ≤ 400px) and min-width (anything ≥ 400px)
Responsive Images
Making an image responsive requires only two css style changes for basic implementation. First we want to set the max-width: 100%, which ensures the image will never be larger than the container it is in. Next set height: auto, which will allow the image to automatically adjust its height to properly display.
Responsive Typography
Making text responsive cant be done by using viewport units instead of px or em. Viewport units like percentages are relative units. Viewport units vary in that they are relative to the size of the viewport whereas percentage is relative to the size of the parent container element. These are the four different viewport units:
- vw (viewport width): 25vw would be 25% of the viewport’s width
- vh (viewport height): 3vh would be % of the viewport’s height
- vmin (viewport minimum): 70vmin would be 70% of the viewport's smaller dimension (height or width).
- vmax (viewport maximum): 100vmax would be 100% of the viewport’s bigger dimension (height or width).
Resources:
Find a list of popular screen viewport sizes and resolutions here!
W3Schools detailed media query examples!
