Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this article "how to adapt CSS3 to PC and mobile pages", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "CSS3 how to adapt PC and mobile pages" article.

In my opinion, the difference between the mobile page and the PC page is that the width and height of the screen are different, and the proportion of content in the page is also different. There is no hover event on the mobile, and there is no touch event on the mobile, which is the difference between the mobile page and the PC page. Apart from these, the required CSS, HTML and JavaScript are just about the same.

1. Add it to the label. Viewport is the viewport, that is, the screen area displayed by the browser, and you use the chrome browser to simulate all mobile phones with a width of 980px. That is, when you look at the page on your phone, all you see is a scaled page, and the width of the phone screen simulates 980px to zoom the page. If you specifically adapt to the phone's screen to make a page and do not want the phone to zoom, you can add it to the tag so that the page can be displayed without zooming in. This tag means that the width of the viewport is the width of the device, without scaling, the initial scaling value is 1, the maximum scaling value is 1, and the minimum scaling value is 1. In this way, the width you get is the width generated by the device. So it is necessary to add this meta tag to the mobile page.

two。 Use media query: this line of code means that the css style in {} will only take effect if the screen width bit 0-375px is satisfied. And should be used in the middle if multiple conditions are to be met. A responsive page can be made with this, and the page will be displayed differently when the width of the screen is different. But in this way you have to thank several different css documents to meet different widths of devices. You can also use the link tag to add to the tag, for example, so that it will only take effect if the screen width is in 375px.

3. Using media queries requires writing different css styles under different widths, which is a bit cumbersome. Another mobile layout is to use dynamic rem for layout, so that when the width of your device changes, the style of the page will change with the width of the device. Rem refers to the font size of the root font-size root element, that is, the font size of the html element. Add the following code to the tag to make the size of the rem equal to the width of the screen. Calculate the proportion of each part of the page in the width of the screen, in rem, so that when the width of your screen changes, the content of the page will change accordingly, rather than the width of the page will be distorted when the width of the page changes. But not all must use rem as a unit, other px and so on can also be used.

The above is about the content of this article on "how CSS3 adapts PC and mobile pages". I believe we all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to learn more about related knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.