What is the difference between mobile development and PC pages

  • In my opinion, the difference between a mobile page and a PC page is the width and height of the screen, and the proportion of content in different widths and heights is also different. There is no hover event on the mobile side, and there is no touch event on the mobile side, which is the difference between my mobile page and PC page. Other than that, the CSS, HTML, and JavaScript required are pretty much the same.

How to adapt to mobile pages

. Viewport is the viewport, is shown by the browser screen area, chrome was used to simulate all your mobile phone with the document. The documentElement. ClientWidth width is 980 px. That is, when you look at the page with the phone, you see the page is zoomed. The width of the phone screen simulates zooming the page by 980px. If you make a page specifically for the phone’s screen and don’t want the phone to zoom,
this allows the page to be displayed without scaling. What this label means is that the width of the viewport is the width of the device, no scaling, initial scaling is 1, maximum scaling is 1, minimum scaling is 1. So you with doucment. DocumentElement. ClientWidth width is equipment of authigenic width. This meta tag is a must for mobile pages.

@media(max-width=375px){CSS}, {CSS} will only work if the screen width is 0-375px. @meida(min-width=200px)and(max-width=400px){} This allows you to create responsive pages that display different pages depending on the width of the screen. But then you have to have multiple different CSS documents for different widths of devices. You can also use the link tag to add media to the tag, for example: this will only work if the screen width is 375px.

3. Using media query @media requires you to write different CSS styles in different widths, which is a bit cumbersome. Another mobile layout is using dynamic REM layouts, which allow the page to change as the width of your device changes. Rem refers to the font size of the root element, that is, the font size of the HTML element.
< script > var page = window. The innerWidth; document.write(‘

‘) This makes the rem size equal to the screen width. Figure out the proportion of each section of the page to this screen width, using REM, so that the content of the page changes when your screen width changes, rather than the width of the content changes when your screen width changes. However, not all units have to be rem, other px units can be used.