Media query on pc

in the case of not using bootstrap on the pc side, realize self-adaptation and write your own media query. Since there is only one design drawing, what is the definition of the element size in the design drawing at different resolutions?

Jun.29,2021

only the mobile side needs to consider the resolution. The pc side is self-adaptive, which can be defined by% percentage, flex layout, etc.


1460341849810.png
personally,


the three resolutions are more suitable for demarcation


according to the usage scenario. In general, you only need to consider the compatibility of 1366 and 1920 screens. If you discuss this with ui first, you won't do any useless work.


look at the width dimensions of the design drawings, pc end-part full-screen display and center display
1, full-screen display
% and other layout methods, and mobile side always, if you zoom out to the mobile end, you need to use media;
2 and center display
. In general, the pages of pc and mobile are separate. For screen size, you can switch link addresses. Please refer to Tmall and other well-known websites


.
  1. try to make the website consistent between 1920 and 1366;
  2. Under
  3. 1366, use the media query to rewrite the style.

under the small ps: screen, you may have to adjust the design drawing accordingly and communicate well with ui

Menu