移动端布局方案
（1）布局方案1
使用的技术是：媒体查询（修改html的字体大小）+ rem（相对于html的字体大小的倍数）
使用媒体查询，来监视设备的视口宽度发生的变化，为此做出响应，匹配对应的样式，而文本大小的变化也是为了响应设备的宽度来做出变化，于是需要使用rem单位。
关于rem单位？
rem：就是相对于根节点（html）的文本大小的倍数，假如你html的文本大小设置为50px，那么你设置一个容器div，宽为2rem,高位2rem
实际而言就是等同于 宽 = 2 * 50 = 100px 宽高同理，所以最后在浏览器上显示的div的宽高为200px。
至于媒体查询的话，就是使用@media 来监视所需要监视的设备，而常见的设备有以下：all（所有设备），screen（用于电脑屏幕，平板电脑，智能手机等。）print（用于打印机和打印预览），只不过大部分都是使用all来即可。
需求：根据媒体查询，判断视口的大小，来改变div的显示多少。
0 - 480px的时候显示div呈现一列排放
481px - 749px 时候显示两列的div
750px - 1023px 时候显示三列div
1024px - 1200px 时候显示四列div
<section>
<div>
<img src="./image/pic2.png" alt="">
<h3>笑意</h3>
</div>
<div>
<img src="./image/pic2.png" alt="">
<h3>笑意</h3>
</div>
<div>
<img src="./image/pic2.png" alt="">
<h3>笑意</h3>
</div>
<div>
<img src="./image/pic2.png" alt="">
<h3>笑意</h3>
</div>
</section>
<style>
* {
margin: 0;
padding: 0;
}
img {
display: block;
width: 100%;
}
section {
min-width: 1200px;
height: 500px;
background: #ccc;
margin: 0 auto;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
div {
/* 使用媒体查询，时时改变div的宽度即可，便能实现响应式 */
width: 23%;
margin-bottom: 10px;
}
@media screen and (min-width: 1024px) and (max-width: 1200px) {
section div {
width: 23%;
}
}
@media screen and (min-width: 750px) and (max-width: 1023px) {
section div {
width: 32%;
}
}
@media screen and (min-width: 480px) and (max-width: 749px) {
section div {
width: 48%;
}
}
@media screen and (max-width: 479px) {
section div {
width: 98%;
}
}
</style>
注意点：只不过由于媒体查询代码量较多，而且安卓手机屏幕各不一样，因此这种方案处理起来相对不方便。于是引出第二种方案。
（2）布局方案2
技术：vw + rem 实现文本和视口的响应式
vw是是一个单位，再阐述vw前面，这就需要得讲讲视口宽度的概念，就一个显示屏幕沾满全部的时候，也就是一个视口为100%，而vw就是视口的单位
1 vw = 1 % 的视口宽度 => 100vw = 100 %视口宽度
而移动端由于屏幕尺寸的缘故，考虑到图片失真问题，还有文本问题，都是采用二倍图或者三倍图的做法。
这也牵引出一个 像素比的单位 dpr = 物理像素 / 逻辑像素
物理像素就是设计图中的像素，常用的有640px,750px,1080px
而他们的dpr一般匹配都是这样： 2 2 3（一一对应匹配）
逻辑像素就是我们一般书写的像素单位 = 物理像素 / dpr
以设计图为750px为例：
假如设计图的大小为750px，那么dpr为2，也就是逻辑像素为350px
1 vw = 1% 视口宽度（750px中的视口宽度为350px）
推理出100vw = 350px
也就是100px = 26.67vw;
然后由于html中的字体大小设置为28.73vw（也就是100px），当你在ps量取到的像素，先处于dpr，再除于100px就是rem的值
为什么html中不能为字体大小的单位？
因为html的字体大小直接固定死了。而vw是根据视口宽度的变化，值也跟着变化。
注意点：高度的设置为rem即可，因为vw随着视口宽度的大小变化而变化。
640px设计图 -- 320px（视口宽度）
320px = 100vw
100px = 31.25vw;
1080设计图 --- 360px（视口宽度）
360px= 100vw
100px = 27.77vw
假如正常计算出来在html设置的字体大小为26.67vw
那么逻辑像素 = 量取 / 2 / 100px = ?rem
或者
假如正常计算出来在html设置的字体大小为26.67vw 在这边直接除于2 26.67vw / 2 = 13.335vw
那么逻辑像素 = 量取 / 100px = ?rem
这边就以饿了么为例，实现移动端的三段式布局
技术：弹性盒 + vw + rem
来实现头部，主体，底部的布局
01：首先设置html的文字大小，由于设计图为750px，那么100px = 26.67vw;,但是在ps中量取还有除于dpr，因此可以先在html中除于2，然后你量取的ps像素直接除于100就是？rem的单位了！
02：首先设置弹性盒，需要一个父元素，也就是#elm，但是需要高度占满整个屏幕，也就是需要设置html,body的高度了，还有文本大小需要重置一下，也就是在body中设置文本为16px
03：头部与底部量取到高度，转化为rem单位，然后中间主体采用flex来占据剩余空间，需要注意的是，中间主体需要添加overflow:auto;产生滚动条,否则超出的会影响底部布局，还有就是中间主体需要再存放一个容器来包裹内容，不能直接书写版块。
04：对于头部而言，就是头部的定位和input都需要设置跳转，跳转到另外的页面进行搜索或定位功能
注意点1：就是头部搜索框的设置，还有就是放大镜，这个字体图标，需要添加在form那边（内部一个span），然后定位好位置，position: absolute;top: 50%（距离顶部50%）;transform: translateY(-50%)（需要向上走自身的一半）;
或者采用一个div包裹一个span，span来存放那个放大镜，采用定位，而文本居中
注意点2：就是span需要设置字体大小为.26rem（因为量取到是26px,也就是0.26rem）
<div id="elm">
<!-- header -->
<div class="header">
<div class="title">
<span class="iconfont icon-location"></span>
<h1>惠通产业园B9栋</h1>
<span class="iconfont icon-xiabiao"></span>
</div>
<form action="">
<span class="iconfont icon-fangdajing"></span>
<input type="text" placeholder="搜索饿了么商家、商品名称">
</form>
</div>
//主体区
<div class="main">
//主体区内的包裹容器，里面书写各个版块
<div class="main-con">
</div>
</div>
<!-- footer -->
<div class="footer">
<ul class="nav">
<li>
<a href="###">
<em class="iconfont icon-changyonglogo40"></em>
<i>首页</i>
</a>
</li>
<li>
<a href="###">
<em class="iconfont icon-faxian"></em>
<i>发现</i>
</a>
</li>
<li>
<a href="###">
<em class="iconfont icon-order-copy"></em>
<i>订单</i>
</a>
</li>
<li>
<a href="###">
<em class="iconfont icon-wode"></em>
<i>我的</i>
</a>
</li>
</ul>
</div>
body,
html {
height: 100%;
}
html {
font-size: 13.335vw;
}
body {
font-size: 16px;
}
#elm {
display: flex;
flex-direction: column;
height: 100%;
width: 100vw;
}
/* header */
.header {
display: flex;
flex-direction: column;
padding-top: 1px;
height: 1.9rem;
background: linear-gradient(to right, #00aaff, #0085fe);
}
.header .title {
display: flex;
margin: 0.38rem 0 0 0.28rem;
line-height: 0.32rem;
font-size: 0.32rem;
color: #fff;
/* background: orange; */
}
.header .title h1 {
margin: 0 0.14rem;
}
.header form {
position: relative;
margin: .32rem 0.28rem 0 0.28rem;
height: 0.72rem;
width: 6.94rem;
background: pink;
font-size: 0.26rem;
line-height: 0.26rem;
color: #a2a2a2;
}
.header form span {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 1.6rem;
z-index: 1;
font-size: 0.26rem;
}
.header form input {
box-sizing: border-box;
padding-left: .15rem;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
text-align: center;
}
/* main */
.main {
flex: 1;
padding: 0 0.2rem;
box-sizing: border-box;
/* background: green; */
overflow: auto;
}
.main-con {
position: relative;
height: 100%;
width: 100%;
/* background: pink; */
}
/* footer */
.footer {
height: 1.05rem;
width: 100vw;
border-top: 0.09rem solid #000;
}
.footer .nav {
display: flex;
justify-content: space-evenly;
align-items: center;
width: 100%;
height: 100%;
}
.footer .nav li {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}
.footer .nav li a {
display: flex;
flex-direction: column;
align-items: center;
color: #7e7e7e;
}
.footer .nav li a em {
display: block;
width: 0.38rem;
font-size: 0.38rem;
line-height: 0.38rem;
}
.footer .nav li a i {
margin-top: 0.1rem;
display: block;
font-size: 0.18rem;
line-height: 0.18rem;
}
（3）布局方案3
技术： rem.js + rem单位布局
01：第一步引入rem.js文件
02：需要根据设计图的大小来修改宽度（750px等）
03：cssrem插件（配置根节点的字体大小 — ）
文件-首选项 -设置- cssrem（搜索） -Cssrem: Root Font Size（就是设计图除于10的值）
比如设计图为750px，那么750px/10 = 75px 640px的时候就是64px
04：重启
05：设计图中量取到的值，直接书写后，会自动帮你转化为rem值
rem.js文件的注意点：
01：需要根据设计图的大小来修改宽度（750px等）
注意点：常规而言，rem.js文件中大部分划分为10等份，比如750px的设计图，划分为10等份后，就是一等份占75px => 1rem = 75px
然后借助cssrem插件，你实际量取到的数值，直接输入，然后你手动选择哪个自动帮你转化为rem单位的数值即可！
（4）布局方案4
技术： Saaa + vw 布局
Sass是css的预编译语言
。。。正在梳理中，请等待！！！！
1617
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
