前端网页在手机上显示的适配问题

前端开发的h5界面不经适配在手机端显示会出现布局变化的问题。需要在编写的时候注意如下几点，以适应适配。

在head标签内添加

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes"/>

用于设置缩放比例，可以保证整体布局不发生错乱。

对于页面内显示的文字，可以使用两种方式：

var deviceWidth = document.documentElement.clientWidth;

       if (deviceWidth >1080) {deviceWidth=1080;}
       document.documentElement.style.fontSize =deviceWidth/25+"px";

获取显示器的设备宽度，对宽度进行判断，根据自身宽度来决定字体的大小。

这种方式适合于文字、段落较多的页面。可以通过这种方式来设置某元素的整体大小，而且用px表示也较为直观。

第二种方式是使用rem来设置文字大小。rem和em是密不可分的。1em等于16px，可以通过代码来改变默认值。

font-size:62.5%;//设置默认10px；10/16*100%

用em来作为元素的时候，一定要知道其父元素的设置，因为em是一个相对值
rem是CSS3新引进的度量单位，支持safari5+、google chrome、IE9、oprea11+。

前端小白一枚，欢迎各路大神指正。

Mozilla Firefox 3.6+、 Apple Safari 5+、 Google Chrome、 IE9+和 Opera11+著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/css3/define-font-size-with-css3-rem © w3cplus.com