One, PC

Features interactive pages, fixed middle width 1100 or 1200 width, left and right adaptive

You can use media Query (@media) to solve most screen adaptation problems on the PC

Second, mobile terminal

H5 page using REM screen adaptation using hand wash scheme

Hand tao plan

1. Divide the design draft by 10 to get the reference value of font size

2. The introduction of flexible

3. Do not set the viewport zoom value of the meta

4. The reference value of px/ FONT size of the design draft can be converted into REM

5. When using SASS, you need to configure fonts

@mixin font-dpr($font-size){ font-size:$font-size; [data-dpr = '2'] & { font-size: $font-size * 2; } [data-dpr = '3'] & { font-size: $font-size * 3; }}Copy the code

tips:

1. Is px useful on mobile?

There is. Rem is not suitable when you have a fixed scale image or an element that you don’t want to zoom in at all, so using px units ensures that the element is not blurred by the zoom.

2. 1px border problem

Pseudo-element simulation is generally adopted

.scale{ position: relative; border:none; } .scale:after{ content: ''; position: absolute; bottom: 0; background: #000; width: 100%; height: 1px; - its - transform: scaleY (0.5); The transform: scaleY (0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; }Copy the code