[Rem Re Zero Christmas]HTMLCSS Learning Notes (21): Media Query + REM Usage

  Calculate the REM method:

  Combined with media query -> With the change of the device changes the value of HTML Font-size.


  Media query determines the scope


  Mobile design map: 640px 750px 1080px;

  DPR 2 2 3

  Range 320px 375px

  For convenience,You can set the HTML’s Font-size value to 100px; 1REM == 100px;

  100px is a fixed value,There is no way to change as the device changes.

  Can follow the device change

  VW changes according to the viewport size.

  100px ==?The first case of VW:

  If the UI design is 640px

  DPR 2 considering

  Adapted core equipment 320px;


  100VW == 320px

  1VW == 3.2px

  ?VW == 100px

  31.25vw == 100px second case

  If the design is 750px

  Consider DPR 2

  Adapted core equipment 375px

  100VW == 375px

  1VW == 3.75px

  ?VW == 100px

  26.67vw == 100px; if the design is 640px HTML setting{font-size: 31.25VW}

  If the design is 750px HTML setting{font-size: 26.67VW}VW combined with REM calculation process

  Because of the design picture 640px

  So HTML setting{font-size: 31.25vw;}

  Get HEIGHT 88PX in PS

  DPR 2

  88/2 == 44px

  44/100 == 0.44REM; 1: Introduced Flxible.JS plugin


  2: Remove the default Meta label inside HTML

  Introduce Flexible in the page.After js,Flexible willA Data-DPR property is added to the label and the Font-Size style (as shown below).

  For convenient calculations, it can be set to 100px;

  The elements in the page are set with the REM unit.REM is relative to root elementsFont-size to calculate,Flexible.JS canFont-size calculates the size of the box model size.This means that we only need to determine a PX font size at the root element,Therefore, it is possible to calculate the aspect of each element.Thus implement the adaptation effect of the screen

  Our common visual manuscript can be 640, 750, 1125.But flexible.JS is not limited to use these three,So you can also adjust according to your own situation.How to convert,We give examples with a visual manuscript of 640px,Take 640px into 100 copies.Every one is called a unit A,Then each A is 6.4px,And 1REM unit is considered to be 10A,at this time,1REM = 1 (a) x10x6.4 (PX) is 64px.

HK Information