Now there is a web web page. If you want to adapt to the mobile terminal, please give me some ideas.

as mentioned in the title, when it comes to the development of mobile devices, the web web page I am doing now is only aimed at the pc without considering mobile devices at the beginning. Now I want to do multi-screen adaptation on mobile devices. Am I going to use rem,? am I going to write two sets of css to complete pc and mobile devices? because my css is finally packaged into a file, how can I determine which one to load it?. Ask for advice.

Html5 css3 Mobile-web-develops

Mar.12,2021

if you want to write two sets of css, you can use user-agent to determine the current device, load different pages or css files
, but it is convenient to deal with responsive layout through features such as CSS @ media.

generally speaking, adapting to the mobile terminal is not complicated, and there are three basic ideas:

tell the browser how your web page is rendered on mobile devices via < meta name= "viewport" content= "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" / >
uses streaming layout and does not force the width and height of the element to be specified, making it easier to render at different resolutions
use media query @ media to adapt to different resolutions

I suggest you do this:

use some responsive frameworks to reduce development costs, such as Bootstrap
learn by observing the performance of responsive web pages at different ends, refer to Bootstrap theme
rem or vw is actually the most trivial trick, just take a look at it. (actually, I am against rem,. I think we should @ media + px)

Previous: Mini Program, how to add a method to data rendering and change its value, such as the following figure and code

Next: Is this the arrow function?