This article is a record of the problems AND solutions I encountered during development.

1. Determine the size of the screen that needs to be adapted. Although our front end starts with the default large screen of 1920*1080, it is necessary to clarify the scope of adaptation before development in case someone does not understand;

2. Make it clear with UI that the font size should be above 12px as far as possible. First, it is difficult to write below 12px. Second, under 12px in large screen display effect is not good;

3. I used Zoom to adapt different screen sizes. 1920 is the width of the design draft

const s = window.innerWidth / 1920
document.body.style.zoom = s + ''
Copy the code

Transform Scale, REM, etc.

4. It is difficult to implement many styles in the large screen, so many pictures may be used instead. If there are too many pictures, Sprite images can be used to optimize;

5, DataV component library in the rotation table config data update after view does not change

This.config = {data: ['foo', 'foo']} is validCopy the code

6, the realization of the 3 d graph: imitation gallery.echartsjs.com/editor.html…

7. Achieve the progress bar effect as shown below

Using background images

Background-position: ${100-item. ‘%’}%; 8, line chart gradient background color: imitation echarts.apache.org/examples/zh…

9. Click the left side of the screen to pop up on the right side of the screen, click the right side of the screen to pop up on the left side of the screen to realize the function (with zoom in 3 can be adapted to different screens), use the following code to obtain the click position;

function getElementPos (elementId) { var ua = navigator.userAgent.toLowerCase() var el = document.getElementById(elementId) if (el.parentNode === null || el.style.display === 'none') { return false } var parent = null var pos = [] var box if (el.getBoundingClientRect) { // IE box = el.getBoundingClientRect() var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop) var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft) return { x: box.left + scrollLeft, y: box.top + scrollTop } } else if (document.getBoxObjectFor) { // gecko box = document.getBoxObjectFor(el) var borderLeft = (el.style.borderLeftWidth) ? parseInt(el.style.borderLeftWidth) : 0 var borderTop = (el.style.borderTopWidth) ? parseInt(el.style.borderTopWidth) : 0 pos = [box.x - borderLeft, box.y - borderTop] } else { // safari & opera pos = [el.offsetLeft, el.offsetTop] parent = el.offsetParent if (parent ! == el) { while (parent) { pos[0] += parent.offsetLeft pos[1] += parent.offsetTop parent = parent.offsetParent } } if (ua.indexOf('opera') ! == -1 || (ua.indexOf('safari') ! == -1 && el.style.position === 'absolute')) { pos[0] -= document.body.offsetLeft pos[1] -= document.body.offsetTop } } if (el.parentNode) { parent = el.parentNode } else { parent = null } while (parent && parent.tagName ! == 'BODY' && parent.tagName ! == 'HTML') { // account for any scrolled ancestors pos[0] -= parent.scrollLeft pos[1] -= parent.scrollTop if (parent.parentNode) { parent = parent.parentNode } else { parent = null } } return { x: pos[0], y: } this.isleft = getElementPos(idName).x > 960Copy the code