Mobile terminal adapter study notes

A few proper nouns and units

(iphone6)

• Resolution: 1334pt x 750pt

  Screen has 1136 vertical pixels, there are 750 horizontal

• Screen pixel density: 326 ppi

  The number of pixels per inch screen has, display, dpi = ppi, stressed that the number of dots per inch dpi

  Screen density = Resolution / Screen Size

• Device-independent pixels

  Virtualization.

• Device pixel ratio (DPR)

  Device device pixels pixel bit = / css pixels (vertical or horizontal)

  -webkit-device-pixel-ratio
  -webkit-max-device-pixel-ratio
  -webkit-min-device-pixel-ratio
  //css中，进行媒体查询，对不同 dpr 的设备，做一些样式适配
  resolution | min-resolution | max-resolution(新的标准方式)
  

  window.devicePixelRatio //js获取设备像素比
  

• Screen size: 4.7in

  Feet, the length of the unit, 4.7in screen diagonal refers to the length of 4.7in, 1in = 2.54cm;

PC side, the mobile terminal comparing the viewport

Windows viewport

Strictly equal browser window. Desktop browser, viewportthe width of the height of the browser window, but the mobile terminal viewportis too narrow for the better for the css layout offers two viewport: virtual visualviewportand layoutlayoutviewport

Window units

• vw: 1vm = 1% of the width of the window
• vh: 1vh = 1% of the height of the window
• vmin: Select vw and vh the smallest of the
• vmax: Select vw and vh the largest of the

PC end

status	default	amplification	Narrow
Layout viewports	equal	Narrow	amplification
Visual viewport	equal	Narrow	amplification
Browser window (standard)	-	-	-

Mobile end

status	default	amplification	Narrow
Layout viewports (CSS)	Too large	constant	constant
Visual viewport (presented to the user)	equal	Narrow	amplification
Browser window (standard)	-	-	-

Ideal viewport

That browser (screen) Width

<meta name = "viewport" content = "width=device-width">
//IE横竖屏切换过程中出现不兼容
<meta name = "viewport" content = "width=device-width,initial-scale=1">

initial-scale=1The initial scale of 1, while the layout viewport will be sized to the size of the scaled

Retina screen & normal screen, blurring the origin

• Bitmap pixel

  Raster images (png, jpg, gif, etc.) smallest unit of data, a bitmap for each pixel has some of its display information (display position, color values ​​and transparency)

  A bitmap pixel -> a physical pixels, to get the perfect picture clearly shows

• Zoom ratio scale

  scale = 1 / dpr

dpr performance

Normal screen, Retina screen (screen definition device, one pixel corresponds css four physical pixels), the pixel CSS rendering uniform size. The difference is the number of physical pixels corresponding to a pixel css (covered)

Blur solution

Layout concept

1. Static layout

   In order to pxmake the unit

2. Fluid layout

   Widths using percentages, the use of height pxas a unit

3. Adaptive layout

   Create more static layouts, each layout corresponds to a static screen resolution range. Use media queries to switch multiple layout @media

4. Responsive layout

   Flow layout + elastic layout with media queries technology

5. Elastic layout

   rem/emlayout,

   • rem, with respect to the htmlelements font-sizein terms of size, there are some features hack
   • It is fairly standard vmunit
   • em, relative to the parent element

   Taobao Flexible(application Rem layout)

REM layout

1 rem = 100 px

Core: Set the root html element font-size

In general, in order to prevent high-definition screen pixels is not enough blurry, we get the design draft is 640px (iphone5 device width 320px) or twice the draft 750px (iphone6 ​​device width 375px), made in accordance with the width of the device twice the size.

That development time to be set in the CSS What size do, how to do a design draft to fit different models

Best solution: Measure the size of an element or image or text in photoshop or other tool, and then written directly to the code. Adaptation does not require additional care.

width:px2rem(200);

Example set the width 375px, based iPhone6 ​​example, if the width of the page than 640px, html page in the font-size constant at 120px, otherwise, the size of the html page font-size is:

100 * (移动端屏幕宽 document.documentElement.clientWidth / 640) 

#html{
font-size: 100px;
}

function recalc(){
    var h = document.getElementById('html1');
    //w,实际宽度，获取当前屏幕可视区域大小
    var w = document.documentElement.clientWidth;
    console.log(w);
    //d, 设计宽度
    var d = 375
    // 动态设置 html 根标签字体大小
    if(w >= 640){
        h.style.fontSize = '120px';
    }else{
        h.style.fontSize = w / d * 100 + 'px';
    }
    console.log(h.style.fontSize);
}
window.addEventListener("resize",recalc,false);
document.addEventListener("DOMContentLoaded",recalc,false);

Renderings

Reference 1
Reference 2
Reference 3