There are two ways to achieve this effect.
Method 1, instead of using a fixed element size value, use a percentage, but unless the rendering of the page you develop is quite straightforward, it is not recommended. Because there are many styles used for rendering in the development of CSS, percentages are not supported. Not as you might imagine, each style of each element can be automatically adjusted according to the percentage. For example, only one div is written in a test page, and its width and height are set as percentages. From the effect, it can be found that if no other rendering coordination is made, the height of this div is collapsed, that is, on the page I can't see this div on the . Another example is the size of the content font. In most cases, the default font size of the browser is 16px. When you use a percentage to configure the font size, 100% means that the default size of the browser is used, but not all browsers default The font size is all 16px. There are quite a few CSS styles that use percentages like this to set problems, so if your page is not simple enough, then don't use percentages directly.
The second method, which is also the most widely used method, is to develop the website in a responsive manner. It should be noted that responsiveness itself has many other names, some places are called streaming development, and some places are directly called n-in-1. You don’t need to care about what the different places are called. You just need to know that the core of this technology that adapts to different devices and has controllable display effects is the media capability provided by CSS. Depending on the width, it will only take effect when the width and height requirements are met
<link rel="stylesheet" media="screen and (max-width:600px) and (max-height:400pX)"href="style.css">
You can also use media capabilities to write different styles in a CSS style file, just like the logic of if else tags
@media screen and (max-width: 200px) {
/* 应用样式 */
}
Considering the running speed of the website, it is recommended to detect the screen width and height when importing