web screen mobile terminal adaptation scheme

Because the resolution phone screen sizes, if you use traditional static layout, the width and height of each element of the style-coded in different screens have a wide variety of display. This is obviously not the result we want. What we need is based on different screen resolutions to fit different sizes of style. The resolution of different mobile phones have the same layout style

1.rem adaptation

1rem html tags is the size of the font-size, in rem adaptation scheme, we have to be set as the base value rem size of the element. 1rem larger units, the greater the size of the element, 1rem smaller units, the smaller the size of the element

Method: acquiring the screen resolution set dynamically by js 1 rem size, i.e., the larger the screen resolution => 1 rem = greater> element greater, so to fit different screen resolution

Disadvantages: need to manually convert rem and px

Note: You need to set the perfect viewport. In addition 1rem value Although you can customize, but Google browser minimum font is 12px, so rem set the time to ensure 1rem not at a minimum screen smaller than 12px

<!-- 设置完美视口 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Method a: setting an inline style elements html

<script>
    var html = document.querySelector('html')
    // 照这种设置 375分辨率 （苹果6）的1rem = 20px
    html.style.fontSize = document.documentElement.clientWidth/18.75 + 'px'
</script>

Method Two: Add style label, set the style for the html tag, this method can be upgraded to the highest weighting style

<script>
    var head = document.querySelector('head')
    // 在iphone6中 1rem=20px 移动端浏览器字体最小12px
    var w = document.documentElement.clientWidth/18.75
    // 创建style标签
    var styleNode = document.createElement('style')
    // 在style标签中写入内容
    styleNode.innerHTML = "html{font-size:"+ w +"px !important}"
    // 将style节点插入到head中
    head.appendChild(styleNode)
</script>

2.viewport adaptation

viewport adaptation is to use the zoom, the fixed-size pages scaled to the same size and screen resolution

Advantages: Just as designed in FIG. 1: 1 to the size of the size of the element can be set without regard to numeric conversion (scale value is converted to do)

In the meta tags, scale = 1.0 is equivalent to set width = device-independent pixels in size
to 640px design Pictured example, assume that our phone screen width is 375px, this effect occurs in 1 scale =:

This under the kinds of programs we need to destroy the perfect viewport, modify the value scale to fit different screen. As long as the page down to the size of the phone screen, so it will not happen again scroll bars (375/640 = 0.5859375)

<meta name="viewport" content="initial-scale=0.5859375" />

The actual development, there are many, not fixed the phone's screen size. Page is the same, the 640 is not fixed, so it is necessary to dynamically set the value of the scale using js

<script>
    // 设置设计图的尺寸640 / 750 都行
    var targetW = 640
    // 设定缩放比例
    var scale = window.screen.width / targetW
    // 创建meta标签
    var meta = document.createElement('meta')
    // 为meta标签设定属性值
    meta.name = "viewport"
    meta.content = "initial-scale="+scale+", minimum-scale="+scale+", maximum-scale="+scale+",user-scalable=no"
    // 将meta标签插入到head标签中
    document.head.appendChild(meta)
</script>