- WordPress Mobile Web Development：Beginner's Guide
- Rachel McCollin
- 394字
- 2021-08-13 18:06:15
Mobile themes versus responsive themes
In the past, most site owners who wanted a mobile-friendly site would use a separate mobile theme for the site with a design specifically for mobile devices. Some would also use different mobile domains. In fact, this is what those plugins we learned about in the last chapter are doing.
If you’re using a mobile theme, you tell WordPress to switch themes if the visitor is using a mobile, and stick to the desktop theme if he/she’s using a—yes you’ve guessed it—desktop PC.
A responsive theme, on the other hand, uses the same theme and similar styling for both sites, but uses a combination of a fluid layout and media queries to make the layout and content different on different-sized devices. It doesn’t just work for mobiles; responsive themes can change the look of a site on tablets or on really large screens, too.
Tip
Responsive design—key terminology
To get to grips with a responsive design, you’ll need to understand the following:
- Fluid layout: This is a site layout that uses percentages for widths instead of pixels. The effect of this is that when the browser window changes width, so does the site.
- Media queries: We use media queries to add extra changes to the CSS for devices of a particular width. The widths most commonly targeted are:
- Mobile devices such as smartphones: These are 320px wide and 480px high, which means the width of the screen will change when the device is turned around.
- Tablet devices: These vary in size but the screen on the iPad, which is by far the most commonly used, is 768px wide by 1024px high. Other tablets such as the Kindle Fire will be smaller.
- Desktop computers: Their width ranges from 1024px and above. It’s common to set a maximum width for our layout so that on very large screens (for example, over 1200px), the site doesn’t lay out so far that it makes the content difficult to read.
We’ll get under the hood of the responsive design in the next chapter, and see exactly what the code is that makes a theme responsive. For now, we’ll just be looking at some that you can download and use straightaway.