If you're a new web developer you've probably made some small web-apps or websites that you want to show off to your friends and family. However, most of those people will likely be checking out your nifty web-app on their mobile device. If you designed your project on a desktop you may not have thought about how it looks or works on a mobile device. If that's the case you probably received plenty of feedback from those you shared your project with who either used a mobile device or sub-1080p display to check out your cool new project.
Now you're exploring how to make your project mobile friendly and I'll introduce you to the tools you need to make that happen. All of these tools are useful for making your website responsive or adaptive, but there is no definitive way to use them to make your project look great on devices of all sizes. It entirely depends on how your website is used and what you need displayed.
The goal of this post is to not overwhelm you with a ton of information, but instead give a brief overview for each tool with links to more in-depth information so you can skip to the part you want to implement or just get an idea of what is available for when you need it.
Viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width, which is the width of the screen in CSS pixels at a scale of 100%.
The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out.
-MDN
"A pixel is not a pixel." Devices with higher DPI (Dots Per Inch) or PPI (Pixels Per Inch) can make designs made for desktops look off. The average desktop monitor can range from ~80dpi to ~200ppi where a mobile device can often be more than double that.
@viewport
@viewport {
width: device-width;
}
@-ms-viewport {
width: device-width;
}
The @viewport CSS at-rule lets you configure the viewport through which the document is viewed. It's primarily used for mobile devices, but is also used by desktop browsers that support features like "snap to edge" (such as Microsoft Edge).
-MDN
Viewport units! (vw, vh, vmin, vmax)
div {
width: 50vw;
height: 50vh;
}
The new units – vw, vh, vmin, and vmax - work similarly to existing length units like px or em, but represent a percentage of the current browser viewport.
-Miriam Suzanne @ CSS-Tricks
- 1vw: 1% of viewport width
- 1vh: 1% of viewport height
- 1vmin: 1vw or 1vh, whatever is smallest
- 1vmax: 1vw or 1vh, whatever is largest
-Chris Mills @ Dev.Opera
CSS-Tricks: Fun with Viewport Units
Dev.Opera: CSS Viewport Units: vw, vh, vmin and vmax
@media queries
@media screen and (max-width: 900px) {
div {
width: 5vw;
height: 5vw;
}
}
Media queries are useful when you want to modify your site or app depending on a device's general type (such as print vs. screen) or specific characteristics and parameters (such as screen resolution or browser viewport width).
-MDN
CSS-Tricks: CSS Media Queries
MDN: Using Media Queries
Another option would be to create whole stylesheets that load per screen size, aka the 'Adaptive' model
CSS-Tricks: Resolution Specific Stylesheets
CSS Grid
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-column-gap: 5px;
grid-row-gap: 5px;
}
// If you had 9 divs inside a div with the classs .container
// this will create a 3 x 3 grid of those 9 inner divs with 5px between them
CSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a 1-dimensional system.
You work with Grid Layout by applying CSS rules both to a parent element (which becomes the Grid Container) and to that element's children (which become Grid Items).
-CSS-Tricks
The fr unit is a fleixible unit for defining CSS grids.
The fr unit (a "fraction") can be used when defining grids like any other CSS length such as %, px or em.
-Robin Rendle @ CSS-Tricks
CSS-Tricks: Getting Started With CSS Grid
CSS-Tricks: A Complete Guide to CSS Grid
CSS-Tricks: An Introduction to the fr CSS unit
Flexbox
.container {
display: flex; /* or inline-flex */
}
A flex container expands items to fill available free space, or shrinks them to prevent overflow.
Note: Flexbox layout is most appropriate to the components of an application, and small-scale layouts, while the Grid layout is intended for larger scale layouts.
CSS-Tricks: A Complete Guide to Flexbox
Responsive Fonts: em and rem
h1 {
font-size: 2rem
}
While em is relative to the font-size of its direct or nearest parent, rem is only relative to the html (root) font-size.
-Chris Coyier
calc()
.content {
/* Subtract the header size */
height: calc(100% - 50px);
overflow: auto;
}
calc() is a native CSS way to do simple math right in CSS as a replacement for any length value (or pretty much any number value). It has four simple math operators: add (+), subtract (-), multiply (*), and divide (/). Being able to do math in code is nice and a welcome addition to a language that is fairly number heavy.
The most useful ability of calc() is its ability to mix units, like percentages and pixels.
-Chris Coyier @ CSS-Tricks
calc() can really save your butt when you have tight rules, but also need responsive design.
Hardcore CSS calc( )
A Couple of Use Cases for Calc()
Adaptive vs Responsive
- Adaptive takes your current structure and scales it for many sizes.
- Responsive serves different templates based on the user agent and the device type.
dev.to: The Adaptive + Responsive model - Mattia Astorino
CSS-Tricks: The Difference Between Responsive and Adaptive Design
Top comments (1)
Building a mobile-friendly website is important for business application and development. It will increase user-experience and grow your business. To market your business, a mobile-friendly website is an essential source.
You can refer to how a mobile-friendly website impacts business development.
blog.arthonsys.com/how-mobile-frie...