html5移动端页面分辨率设置及相应字体大小设置的靠谱使用方式

网上的资料太多，且大多都是技术介绍型，特别是针对andROId上，网上写的各种麻烦，各种复杂，各种不接地气儿...

我在做移动端网页时，总是和美工设计的页面有出入，主要还是由于双方对移动端HTML5实现页面还了解还不够。 

今天就研究一下各大互联网公司对于移动端页面的处理方式。

主要研究对象：BAT(度娘，阿狸，企鹅)这几家的移动端网站或webapp

主要研究点：viewport的设置，字体的设置，图片原始宽高设置

汝甚吊，令尊知否？

 咦？target-densITydpi呢？

网上有老复杂的计算，针对不同的屏幕分辨率，通过公式计算出不同结果再用JS输出到viewport上，各种云云， 我只想说：汝甚吊，令尊知否

GOOGLE现在也已经不建议使用target-densitydpi这一属性，webkit中已移除了，请看这里

http://trac.webkit.org/changeset/119527

现代移动端网站的最佳实践

 我看了BAT的移动端页面中，现在是没有target-densitydpi这个东西了。

最佳实践：

1、在viewport中将width设置为device-width, 如：

meta name="viewport" content="width=device-width">

2、并且将网页设计成自适应方式

先有再优才是王道

CSS中关于分辨率宽度设置：

宽度可以使用320px为标准，图片宽度可以以640px为标准。

这样一方面兼容了低分辨率的低端机，一方面兼容了高分辨率的高端机，缺点是可能会浪费些流量，但开发效率上来讲那是极好的，要保证。

字体单位设置

几个网站中大概使用了以下几个单位

Fontsize单位：px, em, %, rem

只有淘宝首页使用了rem这个单位，果然是淘宝的UED比较喜欢尝试新的东西，这个单位是CSS3中新加入的，结合了em与px的优点，摒弃了em与px的(不易操控)缺点

网上的资料太多，且大多都是技术介绍型，特别是针对android上，网上写的各种麻烦，各种复杂，各种不接地气儿...

我在做移动端网页时，总是和美工设计的页面有出入，主要还是由于双方对移动端HTML5实现页面还了解还不够。 

今天就研究一下各大互联网公司对于移动端页面的处理方式。

主要研究对象：BAT(度娘，阿狸，企鹅)这几家的移动端网站或webapp

主要研究点：viewport的设置，字体的设置，图片原始宽高设置

汝甚吊，令尊知否？

 咦？target-densitydpi呢？

网上有老复杂的计算，针对不同的屏幕分辨率，通过公式计算出不同结果再用JS输出到viewport上，各种云云， 我只想说：汝甚吊，令尊知否

google现在也已经不建议使用target-densitydpi这一属性，webkit中已移除了，请看这里

http://trac.webkit.org/changeset/119527

现代移动端网站的最佳实践

 我看了BAT的移动端页面中，现在是没有target-densitydpi这个东西了。

最佳实践：

1、在viewport中将width设置为device-width, 如：

meta name="viewport" content="width=device-width">

2、并且将网页设计成自适应方式

先有再优才是王道

CSS中关于分辨率宽度设置：

宽度可以使用320px为标准，图片宽度可以以640px为标准。

这样一方面兼容了低分辨率的低端机，一方面兼容了高分辨率的高端机，缺点是可能会浪费些流量，但开发效率上来讲那是极好的，要保证。

字体单位设置

几个网站中大概使用了以下几个单位

Fontsize单位：px, em, %, rem

只有淘宝首页使用了rem这个单位，果然是淘宝的UED比较喜欢尝试新的东西，这个单位是CSS3中新加入的，结合了em与px的优点，摒弃了em与px的(不易操控)缺点

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！