There are five types of categories:
Base - these are the defaults. They can include attribute selectors, pseudo-class selectors, child selectors or sibling selectors. Essentially, a base style says that wherever this element is on the page, it should look like this.
Layout - divides the page into sections.
Modules - this is the reusable parts of the CSS.
State - how the CSS will look when in a particular state. Such as dark theme.
Theme - How the modules or layouts might look during certain times such as a holiday theme.
Adaptive and Responsive web design are very similar. Responsive reacts quickly to any change. Adaptive is easy to modify for a new purpose or situation.
Responsive is quickly becoming the favorite for being able to dynamically adapt to different browser and devices.
Responsive web design is broken down into three main components, including flexible layouts, media queries, and flexible media.
With this design it will be able to resize to any width. Typically used with ems or percentages.
When you set the percentages the boxes will resize as the screen size changes.
Media queries provide the ability to specify different styles for individual browser and device circumstances, the width of the viewport or device orientation for example.
Here is how to initialize a media query
CSS code
@media all (max-width: 1024px) {
background-color: green;
}
I’ve told the CSS that all different media types should have a max width of 1024 px.
When a media feature and value allocate to true, the styles are applied. So when that code becomes true the background color will change.
You can do so much more with @media such as set rules and logical operators for certain things such as screen sizes, whether the screen is turned into portrait mode, etc.
By using the media queries you can build a nice responsive site that will flex and change per whatever screen the user has.
Note from the article:
“Your instinct might be to write media query breakpoints around common viewport sizes as determined by different device resolutions, such as 320px, 480px, 768px, 1024px, 1224px, and so forth. This is a bad idea. When building a responsive website it should adjust to an array of different viewport sizes, regardless of the device. Breakpoints should only be introduced when a website starts to break, look weird, or the experience is being hampered. Additionally, new devices and resolutions are being released all of the time. Trying to keep up with these changes could be an endless process.”
This is the technique of building the default styles for a mobile devices then using media queries to expand as the viewport grows.
Example from the article:
@media screen and (min-width: 400px) {...}
@media screen and (min-width: 600px) {...}
@media screen and (min-width: 1000px) {...}
@media screen and (min-width: 1400px) {...}
Inside the CSS you can set rules for when those min-width sizes are met to change the look of your page.
Using the viewport meta tag with either the height or width values will define the height or width of the viewport respectively. Each value accepts either a positive integer or keyword. For the height property the keyword device-height value is accepted, and for the width property the keyword device-width is accepted. Using these keywords will inherit the device’s default height and width value.
Here is what you would put in the code to make the elements the same size as the device’s width:
<meta name=”viewport” content=”width=device-width”>
The initial-scale of a website should be set to 1 as this defines the ratio between the device height, while in a portrait orientation, and the viewport size. Should a device be in landscape mode this would be the ratio between the device width and the viewport size. Values for initial-scale should always be a positive integer between 0 and 10.
<meta name=”viewport” content=”initial-scale=1”>
The minimum-scale and maximum-scale values determine how small and how large a viewport may be scaled. When using minimum-scale the value should be a positive integer lower than or equal to the initial-scale. Using the same reasoning, the maximum-scale value should be a positive integer greater than or equal to the initial-scale. Values for both of these must also be between 0 and 10.
<meta name=”viewport” content=”minimum-scale=0”>
Also we want the user to be able to zoom as needed for any small looking text.
<meta name=”viewport” content=”user-scalable=yes”>
Now lets make it easy and combine them all if its a situation that we can do that:
<meta name=”viewport” content=”width=device-width, initial-scale=1”>