看题知意，本篇文章是想通过实战开发的思路来讲解前端开发适配的原则性思路；因为近年来移动端的高歌猛进，发展势头为不可挡之势，因此我们的前端开发也分为两大主要端口，PC端和移动端。PC端有PC端的适配原则，移动端有移动端的适配原则，但是总体思路都是不变的。
这里开始我们要讲解的知识点，我们依次讲解的有：float浮动布局，position定位布局，px固定布局，rem和em布局，百分比布局，flex弹性布局。
float浮动布局 `
<style type="text/css">
div{
float: left;
width: 120px;
height: 120px;
color: white;
}
.div1{
background-color: red;
}
.div2{
background-color: orange;
}
.div3{
background-color: green;
}
</style>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</body>
复制代码` 上面这段代码就是一个最简单的浮动布局示例，这段代码实现了让三个div并排向左排列；注意：浮动布局的float属性，是会影响到后面布局的HTML代码，所以要注意清除浮动,而float主要的属性就是:'left'和'right';浮动w3c官方文档参考地址
position定位布局 `
<style type="text/css">
.parent-div{
width: 1000px;
height: 250px;
border: 1px solid #eee;
position: relative;
left: 150px;
}
.child-div{
width: 50px;
height: 50px;
position: absolute;
left: 475px;
top: 100px;
background-color: indianred;
}
.fixed-div{
width: 100px;
height: 100px;
position: fixed;
right: 0;
top: 0;
background: greenyellow;
}
.static-div{
position: static;
left: 100px;
top: 100px;
width: 100px;
height: 100px;
background-color: dodgerblue;
}
</style>
<body>
<div class="parent-div">
relative
<div class="child-div">
absolute
</div>
</div>
<div class="fixed-div">fixed</div>
<div class="static-div">
static
</div>
</body>
`
复制代码上面这段代码展示的是一个简单postiton定位布局， class类名为'parent-div'给自己设置了position的相对定位属性relative，所谓相对定位，通俗的讲就是以自己在文档流的正常坐标进行定位，在我们实际开发中，相对定位的设置一般都不是给自己当前元素使用，而是要给当前元素的子级元素做绝对定位时使用为主，也可以通过'left','right','top','bottom'，来设置自己的位置； class类名为'child-div'给自己设置了position的绝对定位属性absolute,绝对定位一般都是和相对定位结合使用，如果父元素为设置相对定位，则会一级一级向上找，直到document根节点为止，定位位置通过'left','right','top','bottom'，来设置； class类名为'fixed-div'给自己设置了position的固定定位，固定定位是相对于浏览器窗口定位，定位位置通过'left','right','top','bottom'，来设置； class类名为'static-div'给自己设置了静态定位属性static,静态定位是postiton属性里最为特别的一个，说他特别是因为他其实就是一个无的属性，它自己本身会忽略'left','right','top','bottom'的定位设置。注意事项：postiton：absolute和fixed属性都是会脱离文档流，所以在实际开发使用过程中一定要理清他们的特性，定位w3c官方文档参考地址；
px固定布局
看到这里，肯定会有人有疑问，px固定布局，似乎大家都一脸蒙蔽的感觉，不要蒙蔽，这只是我个人对这种布局方式的一种称呼而已，而px呢，它自己本身其实也只是一个度量单位，1px等于1像素，而这种固定布局应用得最多是在pc端，而且可以说是广泛使用和应用，下面请看代码： `
<style type="text/css">
.warren-div{
width: 100%;
height: 100%;
}
.head-div{
width: 100%;
height: 80px;
}
.content{
width: 1180px;
margin: auto;
}
.foot-div{
width: 100%;
height: 180px;
}
</style>
<body>
<div class="warren-div">
<div class="head-div">
head-area,这个区域一般会有logo，导航，用户信息等
</div>
<div class="content">
content-area，这个区域一般会展示各个页面得主要内容，
而且最外围div标签是固定宽度居中显示，
</div>
<div class="foot-div">
foot-area，这个区域一般会显示该站点的一些版本号，合作信心，联系方式等
</div>
</div>
</body>
`
复制代码上面这段代码就是典型采用固定布局布局的代码结构，header头部是固定高度，footer底部是固定高度，content内容区域是固定宽度，并且居中，这种布局结构在我们浏览的各种导航网址,电商站点,还有各种其他的pc站点都能见到，可以说是在PC端应用最为广泛的布局方式而不是之一；这种布局方式应用如此广泛，肯定拥有它非常明显的优势，这里只讲一点：用户体验角度，这里要细讲肯定会涉及人体工程学，但是我们不废话那么多，一句话，设计学里的聚焦，因为我们浏览的关注点一般都会有意无意的看向中间，正是因为这个原因，很多网页设计师,ui设计师都会遵从这个原则去设计；而这对于我们前端开发来说，这样固定式的布局方式对于我们开发也是有好处的，那就是可以高度还原网页设计师，ui设计师的设计效果图。
rem和em布局
说到rem和em，要明确一点的告诉大家，它们和px一样，也是一个度量单位，但是它们和px不同的是，它们是相对单位，而px是电脑屏幕的物理分辨率的固定像素单位。一个一个来，先说em: 1em 等于当前的字体尺寸,2em 等于当前字体尺寸的两倍。这句话是我从w3c官网copy下来的，官网说的很清楚明白，em是相对于当前元素的字体大小的长度单位，比如说，你的当前元素字体大小是12px,那么1em就是等于12px,2em就是24px,下面看代码示例： `
<style type="text/css">
.div1{
font-size: 14px;
}
span{
display: inline-block;
margin-right: 10px;
}
.sp1{
font-size: 12px;
background-color: red;
width: 10em;
height: 2em;
}
.sp2{
font-size: 18px;
background-color: orange;
width: 10em;
height: 2em;
}
.sp3{
background-color: greenyellow;
width: 10em;
height: 2em;
}
</style>
<body>
<div class="div1">
<span class="sp1" title="12px大小的字体">
12px
</span>
<span class="sp2" title="18px大小的字体">
18px
</span>
<span class="sp3" title="继承父元素大小的字体">
继承
</span>
</div>
</body>`
复制代码<style type="text/css">
html{
font-size: 14px;
}
.div1{
font-size: 1rem;
}
span{
display: inline-block;
margin-right: 1rem;
}
.sp1{
font-size: 12px;
background-color: red;
width: 10rem;
height: 2rem;
}
.sp2{
font-size: 18px;
background-color: orange;
width: 10rem;
height: 2rem;
}
.sp3{
background-color: greenyellow;
font-size: 1rem;
width: 10rem;
height: 2rem;
}
</style>
<body>
<div class="div1">
<span class="sp1" title="12px大小的字体">
12px
</span>
<span class="sp2" title="18px大小的字体">
18px
</span>
<span class="sp3" title="继承父元素大小的字体">
继承
</span>
</div>
</body>`
复制代码 (function setFontSize(desW){
var winW = document.documentElement.clientWidth;
var scale = desW/100;
if(winW>desW){ /*检测屏幕宽度是否大于设计效果图*/
document.documentElement.style.fontSize = "100px"
}else{
document.documentElement.style.fontSize = winW/scale+"px";
}
})(640)
复制代码` 设置完font-size肯定就是实际开发过程中的使用了，上面这个js代码是把font-szie设置为100px,其目的就是为了方便计算，这里的1rem就是等于100px,如果你需要给元素设置为50px大小的字体，直接写0.5rem就可以了，具体的大小比例根据自己的实际效果图除100就出来了。
百分比布局
百分比布局是一种响应式布局的方式，也就是说，我们在实际开发过程中，并不实际写死一个元素的宽度值，高度值，或者字体大小，都可以设置，只要是你用px单位的，rem单位的，em单位的，都可以用百分比，只是看你这个百分比相对于谁去设置的而已，请看代码示例： `
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
html, body{
font-size: 14px;
width: 100%;
height: 100%;
}
div{
text-align: center;
}
.div1{
width: 100%;
height: 100%;
background-color: red;
}
.div2{
width: 80%;
height: 80%;
margin: auto;
background-color: orange;
}
</style>
<body>
<div class="div1">
div1是相对于body的
<div class="div2">
div2是相对div1的
</div>
</div>
</body>`
复制代码这个例子里面，class类名div2就是相对于class类名div1，div1呢就是相对于body,body就是相对于html根元素，它们的百分比取决于父级的值有多宽多高，例如这里如果div1的宽度是1000px，那么div2设置80%的宽度就是800px。百分比布局在前端开发里应用非常广泛，不管是pc端还是移动端，都有广泛使用。
flex弹性布局
2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性;任何一个元素都可以指定为flex;
指定flex布局 `
<style type="text/css">
.div1{
display: flex;
}
.span1{
display: inline-flex;
}
</style>
<body>
<div class="div1"></div>
<span class="span1"></span>
</body>`
复制代码块级元素通过display设置flex，行内元素通过display设置inline-flex，设置为弹性布局项目，设置为弹性布局后，有六个属性可以根据项目需求来设置在元素上：
flex-directionflex-direction属性决定主轴的方向（即项目的排列方向），它有4个常用属性值：row(默认值)主轴为水平方向，起点在左端,row-reverse主轴为水平方向，起点在右端,column主轴为垂直方向，起点在上沿,column-reverse主轴为垂直方向，起点在下沿;flex-wrapflex-wrap项目都排在一条线（又称”轴线”）上,它有三个常用值:nowrap，不换行，wrap换行，wrap-reverse换行，把flex项目里的文档流倒转过来，即第一行在最下方了flex-flowflex-flow属性是flex-direction属性和flex-wrap属性的简写形式justify-contentjustify-content属性定义了项目在主轴上的对齐方式，它有五个常用值，flex-start左对齐，flex-end右对齐，center居中对齐，space-between两端对齐，flex项目里的元素之间的间隔都相等，space-around每个项目两侧的间隔相等align-itemsalign-items属性定义项目在交叉轴上如何对齐，它取五个值：flex-start交叉轴的起点对齐,flex-end交叉轴的终点对齐,center交叉轴的中点对齐,baseline项目的第一行文字的基线对齐,stretch如果项目未设置高度或设为auto，将占满整个容器的高度。align-contentalign-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用,它包含六个常用属性值：flex-start与交叉轴的起点对齐，flex-end与交叉轴的终点对齐,center与交叉轴的中点对齐,space-between与交叉轴两端对齐，轴线之间的间隔平均分布,space-around每根轴线两侧的间隔都相等,stretch（默认值）：轴线占满整个交叉轴。
flex项目上的属性，通俗的讲就是flex项目里的子级元素，下面六个常用属性是用来设置在子级元素身上的。
orderorder属性定义项目的排列顺序。数值越小，排列越靠前，默认为0;flex-growflex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。flex-shrinkflex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。flex-basisflex-basis属性定义了在分配多余空间之前，项目占据的主轴空间flexflex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 autoalign-selfalign-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
实际开发应用
上面呢介绍了六种前端开发常用的布局概念，那么在我们实际开发中是怎样使用的呢，是用float浮动布局,position定位布局还是flex弹性布局，在此我们首先要理解我们的项目需求，以移动端为例，移动端开发混合式app也好，公众号的h5也好，我们都是需要做适配的，这个时候我们在做整体项目布局的时候就要知道什么“骨”，什么是“辅”，那么什么是“骨”呢，其实我指的骨就是指整个项目结构的，比如上中下结构布局的，左右布局结构的，
1433
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
