手机端页面开发

对于手机端页面开发。我们先有一定的基础知识。

1.像素基础知识

px:逻辑像素。浏览器使用的是逻辑像素
em:相对单位。基于父节点字体大小。em是指字体高度 。浏览器默认1em=16px,所以0.75em=12px;
rem:相对单位，可理解为”root em”, 相对根节点html的字体大小来计算
vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。
vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。
vmin：vw和vh中较小的那个。
vmax：vw和vh中较大的那个。

2.flex布局应用

对于页面。很多我们需要里面的元素根据屏幕的宽度进行自适应。这里特别容易使用。

//无论项目有没有空间，这个既不放大，也不缩小
//并且项目的大小是项目的本来大小来计算有没有剩余空间。
flex: 0 0 auto;

对于之前写的网页进行解释

line-height: 42.552px;
//为什么会出现这个数字，其实由下行计算出来，即行高是13%的屏幕宽度
line-height: 13.3vw;

font-size: .9375rem;
//这里涉及如何rem，什么是rem。root em。相对根节点html的字体大小来计算
1rem=16px;
.9375rem=15px;

//平常比如我量到尺寸是比如是 100px, 如何转换成vw
//苹果的像素为320px
//所以，
100px = 31.25vm

//flex: 后面的三位分别代表什么含义？
flex:  按照比例增大 按照比例缩小 项目占据的主轴空间

//box-sizing使用border-box和默认有什么区别呢？默认的box-sizing是什么
box-sizing:border-box;//包括padding border content
box-sizing:content-box;//只包括content;
//IE浏览器默认为border-box，别的浏览器默认content-box
//使用场景，当知道固定盒字大小是多少的时候就可以使用。