The wap mobile page calculates the corresponding value of font-size based on dpr and width_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:49:59
Original
1783 people have browsed it

Recently, we are revising the company's wap homepage and adding event pages. In order to achieve better results, we refer to the wap versions of Taobao and JD.com, and then do some analysis of Taobao's wap. Taobao's wap The touch screen version is very adaptable and compatible, so I sorted it out.

The wap mobile page calculates the font-size corresponding value table based on dpr and width as follows:

dpr 最小宽度320px 最大宽度540px 系数
1 20px 33.75px 0.0625
2 40px 67.5px 0.125
3 60px 101.25px 0.1875

Remarks:

1. It increases according to the multiple relationship

2. Mobile Taobao is calculated in this way m.taobao.com

3. Because I am a PHPer, not a professional front-end expert. If there are any mistakes, please guide me. Thank you.


Attachment:

1. js code calculation method:

//Determine font-size through the mobile phone screen dpr and mobile phone width The value of

function autorun() {

//Initial value

var default_width = 20;

var default_dpr = 1;

var dpr = window.devicePixelRatio;

var width = screen.width;

var html_style = '';

var body_style = '';

//dpr multiples

var difference = dpr / default_dpr;

//Calculate

if (difference == = 1 || difference === 2 || difference === 3) {

var default_min_size = 20 * difference;

var default_max_size = 33.75 * difference;

var default_coefficient = 0.0625 * difference;

html_style = get_font_size(width, default_min_size, default_max_size, default_coefficient);

body_style = 'font-size:' * 12 'px';

} else {

html_style = get_font_size(width, 20, 33.75, 0.0625);

body_style = 'font-size:12px';

}

//Perform dom operations

$("html").attr('style', html_style);

$("body"). attr('style', body_style);

}

/**

* Determine the font-size value through the mobile phone screen dpr and mobile phone width

* @param {int} width

* @param {int} default_min_size

* @param {int} default_max_size

* @param {int} default_coefficient

* @returns {String}

*/

function get_font_size(width, default_min_size, default_max_size , default_coefficient) {

var style = '';

//Screen width needs to be calculated between 320-540

if (width < 320) {

style = 'font-size:' default_min_size 'px';

} else if (width > 540) {

style = 'font-size:' default_max _size ' px';

} else {

var difference = width - 320;

var fontsize = default_min_size difference * default_coefficient;

> style = 'font- size:' fontsize 'px';

}

return style;

}



2. Reference article:

http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/


3. Refer to the JS function:

var dpr = window.devicePixelRatio; //Get the phone screen dpr

var width = screen.width; //Get the phone screen width


4. Testing tools:

Use Google’s own mobile phone simulation test in the developer center


source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!