How to set browser size with css

CSS (Cascading Style Sheets) is a language used to describe the style of web pages. CSS can be used to set the styles of layout, fonts, colors, backgrounds and other elements in web pages. Among them, the way to set the browser size can also be achieved through CSS.

When writing CSS styles, you can use the "@media" rule to define media queries of different sizes to apply different styles according to the screen size and device type. This method can change the layout and layout of the page to achieve the best display effect on different screen sizes.

Here are some ways to set the browser size through CSS:

1. Using media queries
   @media rules are a new feature of CSS3 that can be based on screen width or height to set different styles. Through media queries, specific styles can be set for different devices. Examples are as follows:

@media screen and (max-width: 480px) {
body {

background-color: yellow;

}
}

@media only screen and (min-width: 481px) and (max-width: 768px) {
body {

background-color: blue;

}
}

@media only screen and (min-width: 769px) {
body {

background-color: green;

}
}

In this example, we use the @media rule to define three different media queries. Each media query has a maximum or minimum screen width that is used to determine when to apply the style. In the above code, we define the background color for three different screen widths: the background color of a screen less than or equal to 480px is yellow, the background color of a screen with a width between 481px and 768px is blue, and the background color of a screen with a width greater than or equal to 769px The screen background color is green.

2. Using CSS viewport units
   CSS viewport units refer to units relative to the viewport (viewport), which can set different styles according to the screen size. Viewport refers to the size of the visible area of ​​​​the browser. For example, when you open a web page in the browser, the area you see is the Viewport.

The following are some commonly used viewport units:

• vw: represents the percentage of the viewport width (1vw represents 1% of the width of the viewport);
• vh: represents the percentage of the viewport height (1vh represents 1% of the height of the viewport);
• vmin and vmax: represent the minimum and maximum values ​​​​in vw and vh respectively.

For example, we can use the vw unit to set the font size in the web page so that it scales adaptively with the width of the screen. An example is as follows:

body {
font-size: 2vw;
}

In this example, we set the font size of all text in the web page to 2vw. This means that with a viewport width of 1000px the font size is 20px and with a viewport width of 500px the font size is 10px.

3. Using the combination of CSS media queries and viewport units
   We can also use the above two methods in combination to set styles for different screen sizes by specifying different viewport units. For example, we can set different font sizes for different device widths with the following code:

@media only screen and (max-width: 480px) {
body {

font-size: 16px;

}
}

@media only screen and (min-width: 481px) and (max-width: 768px) {
body {

font-size: 20px;

}
}

@media only screen and (min-width: 769px) {
body {

font-size: 24px;

}
}

In this example, we use The @media rule defines three different media queries to set font sizes for different screen widths. For screens 480px or less, the font size is 16px; for screens between 481px and 768px, the font size is 20px; for screens with a width of 769px or more, the font size is 24px.

Summary
Through the above method, we can use CSS to set the size of the browser so that the web page can adapt to different screen sizes and device types. This adaptive design not only improves the user experience, but also improves the usability and accessibility of the website.

The above is the detailed content of How to set browser size with css. For more information, please follow other related articles on the PHP Chinese website!