Build adaptive mobile page_html/css_WEB-ITnose

I have been engaged in PC Web development for many years, but the mobile page development was late, so at the beginning, in order to develop WeChat applications, I was busy with various supplements, but in order to accurately adapt the design draft to various It's still too difficult to use on a mobile phone of this size, so after looking for some information and learning from some mature websites, I integrated a simple method myself and shared it with you. Welcome to try it out.

First of all, you need to have an understanding of viewport. It is recommended to read Apple’s official documentation. Although it is verbose, after reading it once, you will understand basically everything you need to understand.

The first solution

html<meta name="viewport" content="target-densitydpi=device-dpi,width=640,user-scalable=no" />

简便易行，适用情况：1. 网页设计仅针对手机屏幕，并且没有需要根据手机屏幕尺寸进行UI调整的内容，既没有媒体查询的CSS2. 产品层面可以不考虑非主流设备或浏览器的兼容性，例如黑莓的某些设备或搜狗浏览器这类的不支持640定宽渲染的浏览器3. 当手机横竖切换时，能够容忍部分手机在横屏浏览网页时，可能出现的问题(潜在问题)。

This solution is to force the mobile browser to render the web page according to the ratio of 640 and let the browser do the size adaptation; I think this solution is actually very good, absolutely Most scenarios can be supported, and development is simple and efficient. There is no need to consider unit conversion issues of various sizes and style sheets.

Test address: Click here. This webpage is made with a custom width of 640 and can be adapted to webpages of most sizes

The second option

html<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />

No need to explain the above. , most well-known websites do this, but in order to make images and fonts adaptive, the usual approach is to use rem as the unit, and then enable javascript to determine the screen width and dynamically change the fontsize of the html element.

In order to facilitate calculation, the font-size of HTML is usually set to 100px by default, which makes calculation easier. For example, if your web page font is 16px, you only need to write it as 0.16rem. Then if the design draft is 640 Width design, when cutting the picture, convert the units exactly according to the design draft, then get the screen width in js, and calculate the font size of the html according to the ratio: 100/x = 640/documentWidth. Of course, you must add a window.resize event Recalculate to prevent switching between horizontal and vertical screens.

第二种方案有几个弊端： 1. 由于背景图片无法做缩放，(background-size:cover|contain)只能针对单张图片，而对于sprite css image无力解决，所以这里要求如果有背景图，全部制作成单张的，然后再加上background-size:cover|contain，这里凸显出使用css font的好处了... 2. 页面中的所有单位都需要用rem来计算，虽然 X/100是很简单的计算，但是书写的时候还是让人厌烦。 3.如果有图片必须指定宽度，不然图片会按原始宽度进行渲染，当屏幕尺寸与设计预期尺寸不一致时，就会出错了。

Based on the above description, I made two tools:
1. Still using px as the unit when making, monitor changes in css files through the watch plug-in, and then dynamically convert px2rem.
2. Generate auto convert css icon file based on the image, similar to grunt-sprite, but only generates the corresponding css instead of synthesizing the image, so that the image generated by the previous css sprite tool can be switched into a single image ICON at a low cost

The development idea is as follows:
1. Differentiate directories during development. For example, src represents the source code, and the dest directory represents the converted static files. Currently, large-scale projects do this, and there should be no cost. Then CSS still uses pixels as the unit.
2. Use grunt or gulp plug-in to monitor file changes, and then perform copy, sync and other processing. At the same time, the px in css is converted into rem according to the set ratio.
3. Inline styles cannot be directly embedded in web pages, or you need to convert the units yourself before embedding them.

Listening script :
(Note: This assumes that the width is 640 during development and the default font is 32 pixels)

javascript// 根据屏幕宽度适配字体大小$(window).on('resize', function () {  var width = document.documentElement.clientWidth;  $('html').css('font-size', (width / 640 * 32) + 'px');}).triggerHandler('resize');

Test address: Click here

(Because my project uses grunt, the plug-in I wrote is also for grunt. If you plan to use gulp, you need to implement the above tools yourself)

Summary

First A fixed-width development solution is actually very suitable for small teams to create promotion pages, because it avoids the integration of various tools and reduces development complexity.
The second option is suitable for projects that need to adapt to browsers of most sizes. At the same time, if the packaging tool is configured well, the difficulty can be greatly reduced, development and deployment are decoupled, and the development code is relatively clear.