Mobile Web meta-settings and responses

Meta-analysis of Suning's easy-to-buy WAP

Response type

　　Meta settings

　　　　

The width of the media query when read is viewport. Viewport width is the phone resolution. Like Note2 1280*720. Need to reset to device 640*360

Way

Type	Css	Javascript
Principle	Media query wide, high range. Set the Font-size base value for HTML	(window.innerwidth/psd initialization width) *PSD's initial font-size. Calculates the font-size of the current page. assigning to HTML
Characteristics	Pros: Pure CSS Solution	Disadvantage: You need to block the browser before the page is rendered. Some old mobile browser, need to embed JS code to ensure blocking.
	Disadvantage: Because it is a range, can not be precisely adapted. If you add a mainstream phone that is far from the boundaries of the range, you need to re-scope it	The advantages are very precise

　　CSS-Responsive　　

/*in rem mode, the 750px is the PSD reference width and 50px is the font-size reference size. The body is set to the default font size*/Html{font-size:50px;} Body{font-size:24px;} @media screen and (min-width:320px) {Html{font-size: +. 333333333333332px;} Body{font-size:12px;}} @media screen and (min-width:360px) {Html{font-size:24px;} Body{font-size:12px;}} @media screen and (min-width:375px) {Html{font-size:25px;} Body{font-size:12px;}} @media screen and (min-width:384px) {Html{font-size: -. 6px;} Body{font-size:14px;}} @media screen and (min-width:400px) {Html{font-size: -. 666666666666668px;} Body{font-size:14px;}} @media screen and (min-width:414px) {Html{font-size: -. 6px;} Body{font-size:14px;}} @media screen and (min-width:424px) {Html{font-size: -. 266666666666667px;} Body{font-size:14px;}} @media screen and (min-width:480px) {Html{font-size:32px;} Body{font-size: the. 36px;}} @media screen and (min-width:540px) {Html{font-size:36px;} Body{font-size: -. 28px;}} @media screen and (min-width:720px) {Html{font-size:48px;} Body{font-size: at. 04px;}} @media screen and (min-width:750px) {Html{font-size:50px;} Body{font-size:24px;}}

　JS-Responsive

/*   REM mode, 640px for PSD reference width, 16px for font-size reference size.  */

function _adaptfont (maxWidth, basewidth,basesize) {maxWidth= MaxWidth | |640;//Maximum Value 640pxBasewidth = Basewidth | | the; Basesize= Basesize | | -; varWinwidth = parseint (window.innerwidth);/*S4 Mobile Phone Read winwidth is the width of the resolution*/    varDocwidth = parseint (document.documentElement.clientWidth);//and winwidth The difference is, minus the right scroll bar    varBodywidth = parseint (document.body.clientWidth);//use in mixed mode    varDocwidth =math.min (Winwidth, Bodywidth, docwidth); Docwidth> MaxWidth && (docwidth =maxWidth); //Set Datum valuesDocument.documentElement.style.fontSize = (docwidth/basewidth) *basesize +'px';} _adaptfont (); Window.addeventlistener ("Resize", _adaptfont);

Mobile Web meta-settings and responses