How to make WordPress responsive

How to make a WordPress responsive theme/template?

In this era, those who have not used WordPress to build a website dare not say that they have built a website. What is WordPress? WordPress is the world's most famous website content management system (or blog/Blog system), referred to as WP. According to relevant surveys, WordPress’s global market share reached 48% in 2015, and it continues to be the global open source web website system champion. And it is still growing rapidly... Looking at the domestic open source CMS, there are only a few that are truly surviving and keeping up to date. Can Dongyi, dedecms, phpcms, imperial cms, phpwind, discuz, etc. that were once all-powerful still survive?

Tools/Materials

HTML5

CSS3

Modern browsers, such as: Chrome, Firefox, Edge, etc.

Related recommendations: "WordPress Tutorial"

Methods/Steps

1. Simply put, in the head of the web page (< ;head> ), add the following query code:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

2. Then add a media query element to the CSS file, such as:

@media screen and (max-width:480px) {
//当浏览器屏幕小于480px时，此代码块生效
}
@media screen and (min-width:481px) and (max-width:720px) {
//当浏览器屏幕大于480px小于720px时，此代码块生效
}
@media screen and (min-width:721px) and (max-width:1079px) {
//当浏览器屏幕大于721px小于1079px时，此代码块生效
}

The range can be based on Modify it yourself according to the actual situation. OK, this is the difference between responsive and non-responsive. As long as you understand html css, I believe you will master it soon. Doesn’t it feel very simple?

3. After understanding the key points, we can start making responsive static pages. Then just put the static page on WordPress-related functions and loops. After you have created the HTML static page, you can refer to "Common functions for WordPress theme development and production: openue.com/post/597" to make the template.

Notes

During the design process, please try to avoid using fixed width and height for css, use percentage instead, and use rem instead of px for fonts.

The above is the detailed content of How to make WordPress responsive. For more information, please follow other related articles on the PHP Chinese website!