移动端开发布局

一 viewport:

   视口、viewport就是在浏览器上承载显示页面的视口。无论你的手机有多宽，在手机浏览器内部的宽度，始终会是浏览器本身的viewport。

二 控制viewport：

  在浏览pc端网页的时候，因为目前主流浏览器的viewport是980px，所以pc端页面正常显示；而手机屏幕宽度么有980px，所以浏览器会出现滚动条，同时，即使是基于980的viewport，我们在移动端浏览我们的pc页面的体验其实也并不好，所以，一般的，我们会专门给浏览器设计一个移动端的页面。

 控制viewport 写法：在head里面    meta:vp+tab  ;

viewport默认有6个属性

• width: 设置viewport的宽度（即之前所提及到的，浏览器的宽度详），这里可以为一个整数，又或者是字符串"width-device"
• initial-scale: 页面初始的缩放值，为数字，可以是小数
• minimum-scale: 允许用户的最小缩放值，为数字，可以是小数
• maximum-scale: 允许用户的最大缩放值，为数字，可以是小数
• height: 设置viewport的高度（我们一般而言并不能用到）
• user-scalable: 是否允许用户进行缩放，'no'为不允许，'yes'为允许

三 rem布局：个人习惯

    1、给html 标签 设置 font-size：100px;

    2、引入一段js控制：

(function (doc, win) {
	var docEl = doc.documentElement,
	resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
	recalc = function () {
	var clientWidth = docEl.clientWidth;
	if (!clientWidth) return;
	if(clientWidth>=640){
	docEl.style.fontSize = '100px';
	}else{
	docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
	}
	};
	if (!doc.addEventListener) return;
	win.addEventListener(resizeEvt, recalc, false);
	doc.addEventListener('DOMContentLoaded', recalc, false);
	})(document, window);

    拿到设计图时 （假设是 640px的设计图） 图中的尺寸 除以100就是 实际的大小。

四、文字适配问题：(用rem 还是px)

    rem： 可以让页面整体的文字，也跟随着html的font-size来进行改变，在任何屏幕下面，我们的文字都会根据屏幕做一个适应。

     px:固定的尺寸；

   按项目情况考虑：试想这样一个场景。你买了一个大屏手机（5.7寸的），而别人用的是4寸的手机。以rem作为字体单位的话，那大屏手机看到的文字多少和小屏手机确实一样的了。这样来做，其实并不符合我们买大屏手机的期待。同时，以rem作为字体单位，可能会导致出现很多奇怪的字体大小（毕竟是根据html的font-size动态变化的嘛），同时这其中还涉及到了一个点阵尺寸的概念。

  

【倘若一个字体，只提供了12px，14px，16px的点阵。那么当你写13px，15px，17px的时候。就并没有其字体大小所对应的点阵。那么这样就造成了一个问题。他们会使用其相邻的点阵，比如对应使用了12px，14px，16px的点阵，而导致一个问题，文字占用的大小确实改变，但点阵却并没有改变。】

 

问题 一; 因为文字有一个浏览器最小font-size的原因 （也可能是ipone的dpr原因）我在项目中设定的字体  在ipone4下 显示 可能小于最小值 所以在ipone下有几个字超出容器， 显示效果不好。 

   解决办法：用 css3的 scale 属性  讲容器整体缩放。。。