Two kinds of responsive design
There’s two type of responsive design:
One is just adjusting an element’s appearance in response to different media types, like hiding or showing some elements, change size, color or layout.
Another way will be using the diffent design or totally different component for different media types. For example, a complex table view with lots of fields for each row, for a large screen, just show a regular table, but when the screen shrinks, the table view will be replaced with a card list, within each card, all the fields will be rendered vertically.
Detect the current media type
To do responsive development, the essential part is you need to detect what is the current media type. You can detect it within CSS or JavaScript.
CSS in responsive
In CSS, it is quite simple, just use the @media:
@media screen and (min-width: 480px) {
.leftsidebar {width: 200px; float: left;}
.main {margin-left:216px;}
}
And if you are using Basscss, you should use its responsive classes directly:
.container {
composes: col-6 sm-col-12 from 'basscss';
}
The upper code uses CSS-module‘s composes, and indicate the .container has a six columns width in most cases, but when screen become small, it will stretch to a 12 columns width.
The Basscss core provide responsive classes for grid, flex, and hide, you can get responsive margin, padding, layout, position, typography and type-scale from its addons.
JS in responsive
The simplest way to detect media type is just listening to window’s resize event, or you can use a more fancy way using the new API window.matchMedia():
if (window.matchMedia("(min-width: 400px)").matches) {
/* the viewport is at least 400 pixels wide */
} else {
/* the viewport is less than 400 pixels wide */
}
It’s more CSS style, and easy to read, but the old way of listening to the windows size will be more flexible and gives you the ability to get information between breakpoints.
CSS or JS
These two ways of detecting media type are not exclusive to each other, which to use only depends on how complicated your responsive design is going to be:
- use CSS if you only need to do some basic style change to your components, like show or hide, change size, color.
- use JS if CSS can not achieve what you want, or you need to render a totally different component.
Even you have already known which to choose; you still need to make sure, that you use the same breakpoints between CSS and JS. Try not use magic number like:
if (screen.width === 200) {
}
Use predefined breakpoint:
if (screen.mediaType === 'small'){
}
Same in CSS, you can now use CSS variables, like:
:root {
--break-small: 200px;
}
@media (min-width: var(--break-small)) {}
Develop responsive design with react
There’s nothing special doing responsive design in React if you are using CSS, but with JavaScript, I want to set up some rules when implementing responsive React Components.
If in different media type, your component only has simple change, like we talked about at the beginning, only different style, part of it show or hide, then you should put all the logic into the component itself because the main part of the component during different media types remains the same.
If you have a total different responsive design for different media type, like table and card, then you should create two separate components, and then create a responsive component to decide which component to show. Beacuse in this case, these two types of components do not share much, mix them together will lead to hard maintenance. If they do have some common logic, you should try to get the logic out of these components, and put it into the responsive components that decide the actual UI.
