一 viewport:
视口、viewport就是在浏览器上承载显示页面的视口。无论你的手机有多宽，在手机浏览器内部的宽度，始终会是浏览器本身的viewport。
二 控制viewport：
在浏览pc端网页的时候，因为目前主流浏览器的viewport是980px，所以pc端页面正常显示；而手机屏幕宽度么有980px，所以浏览器会出现滚动条，同时，即使是基于980的viewport，我们在移动端浏览我们的pc页面的体验其实也并不好，所以，一般的，我们会专门给浏览器设计一个移动端的页面。
控制viewport 写法：在head里面 meta:vp+tab ;
viewport默认有6个属性
- 设置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 属性 讲容器整体缩放。。。