移动端开发布局

一 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布局：我的习惯

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

    二、引入一段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就是 实际的大小。

4、文字适配问题：(用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 属性  讲容器总体缩放。。。