2 Replies
1. step: responsive head meta tag
Using the following line inside of your
<head> is the basis required for your responsive layout. It sets the browser's window width to the actual screen width.
This means that the browser will (probably) render the width of the page at the width of its own screen. So if that screen is 320px wide, the browser window will be 320px wide, rather than way zoomed out and showing 960px (or whatever that device does by default, in lieu of a responsive meta tag).(source) You can read more about the viewport meta tag here: https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag 2. step: responsive font size You want to increase the font size for higher resolutions and lower it for smaller screens. This can be done with a line of CSS like this: This will clamp between a min font size of 14px and a max font size of 17px by adding a fraction of the windows width to it. For similar examples and a more in-depth explaination, have a look at this article: https://css-tricks.com/snippets/css/fluid-typography/ 3. step: relative units instead of px Pixels are absolute units. They will have the same size in every case, on every device. (Well, kind of. They are still sort of relative, as they take the device's pixel ratio into account. 1px may consist of multiple pixels. 1px is usually the size of a thin line that is barely visible.) For responsive design, you want to use different units: EM 1em is equal to the current font-size of an element. If you haven’t set font size anywhere on the page, then it would be the browser default, which is probably 16px. So by default 1em = 16px. If you set something to 2em on an element with 20px font-size, then this will result in 40px. You want to use
em whenever something is relative to text. For example: You have a button with padding. The padding should scale with the buttons text, so that it gets bigger for buttons with big text compared to smaller buttons. This makes sure the button always looks right on every resolution with fluid typography applied. For example:
REM
Rem works exactly the same as em, just that it is relative to the font size of the root element instead of the current elements font size.
You want to use that for design elements that are not dependent on different sized text, but still should scale along with the fluid typography
Percentages
Percentages are fairly obvious in how they work. If a parent has a width of 20px and the child has a width of 50%, it will come out to 10px. Just like em’s the very nature of percentage sizing is that it is relative.
You should use this for layouts. Often times this would go on a flex-basis rather than on the width/height though. For grid you will use 1fr / 2fr fraction units, but that's a different, rather niche topic.
VW, VH
The vw and vh units are percentages, not of the parent elements width, but of the viewports width (or height). 50vw will take up half of the viewport width, 50vh half of the viewports height.
The viewport units allow elements to scale based on the user's screen dimensions.
sources and further information:
- https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
- https://dev.to/joanayebola/responsive-units-in-css-4fmk
- https://css-tricks.com/css-font-size/4. step: media queries
Media queries should be used alongside responsive units.
Media queries allow you to apply CSS styles depending on a device's media type (such as print vs. screen) or other features or characteristics such as screen resolution or orientation, aspect ratio, browser viewport width or height, user preferences such as preferring reduced motion, data usage, or transparency.https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries As you can see, media queries can be used for a whole lot more stuff than just styles based on the clients resolution. But that's the part relevant for responsive design. I will show this on a very simple example. We will be using the mobile first approach for it. mobile first development Mobile-first design is an approach to designing UIs that prioritizes small-screen experience. As nowadays most website traffic comes from mobile devices, this makes sense. It's also easier to create a mobile layout which is usually more simple and then add in a more sophisticated desktop layout where you use all of the additional horizontal space. In practice this means: We first write CSS for mobile. Then write media query rules that kick in after a certain resolution and transform it for desktop devices. The example Assume we have a container with multiple cards. We want to have everything below each other, so we use flex-direction of column. As space between the cards we use relative units to scale them with screen size. For desktop/tablets this media query kicks in: This will position the elements next to each other for any devices wider than 720px.
MDN Web Docs
Using media queries - CSS: Cascading Style Sheets | MDN
Media queries allow you to apply CSS styles depending on a device's media type (such as print vs. screen) or other features or characteristics such as screen resolution or orientation, aspect ratio, browser viewport width or height, user preferences such as preferring reduced motion, data usage, or transparency.