关于移动端布局总结

（一）移动端如何选型

移动端选型一共就是两种，不用太过于纠结，完全就是看你想要什么样子的，如果想要淘宝或者京东这一种的，在pc端和手机端完全是不一样的页面，那么这就是单独制作移动端页面的方案，一般这样的网站缩放是不会改变样子的，而且网站前面都会加上m这种前缀 说明是单独制作页面，这样的话，是要简单一点，不需要考虑太多的兼容性问题。

但是如果想要像三星那样，不用更换网址，在pc下缩放就改变网页的布局，那么这就叫做，不单独制作移动端页面。

就这两种，你明白了吗？

（二）移动端流式布局、flex布局、rem适配布局、bootstrap适配布局布局各自的特点和适用的条件以及缺点

这个还没看到，晚点再写

☆补一条移动端布局的准备工作，对所有的移动端布局都有用，以后面对移动端布局可以直接复制

1.meta视口标签的设置 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

最标准的viewport设置

• 视口宽度和设备保持一致

• 视口的默认缩放比例1.0

• 不允许用户自行缩放

• 最大允许的缩放比例1.0

• 最小允许的缩放比例1.0

  1. normalize.css 初始化文件 这是移动端公共的初始化文件，功能很好，都使用

  2. 兼容性解决方式 移动端特殊样式的解决

     /CSS3盒子模型/ 又叫做怪异盒模型 box-sizing: border-box; -webkit-box-sizing: border-box; /点击高亮我们需要清除清除 设置为transparent 完成透明/ -webkit-tap-highlight-color: transparent; /在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式/ -webkit-appearance: none; /禁用长按页面时的弹出菜单/ img,a { -webkit-touch-callout: none; }

（三）流式布局布局（百分比布局）

3.1 准备工作

1.对移动端初始化 去网站下载normalize.css html界面引入css文件

2.设置viewpoint标签属性

3.所有宽度都采取百分比的形式，不再给确定的单位

1. body设置

接下来我们先来处理一下body的整体设置。

代码：

body {
    width:100%; /* body的宽度与浏览器保持一致*/
    margin: 0 auto; /* 页面最大宽度是640px，如果在比较大的手机上显示，显示不完全，居中显示 */
    min-width: 320px;  /* 目前市面上最小手机分辨率为320 */
    max-width: 640px;  /*经过测量*/
    background: #fff;
    font-size: 14px;
    font-family: -apple-system, Helvetica, sans-serif;
    line-height: 1.5;
    color: #666;
}

总结：流式布局，百分比布局，只能处理宽度百分比：width：xx%。

3.2 如何使用流式布局写出完整的网页

（四）flex布局布局

4.1 准备工作

同流式布局

4.2 属性和属性值及用法

父盒子属性值

display:flex 将盒子转换成弹性容器

flex-direction 设置主轴方向 默认主轴是x轴，如果想要控制子盒子纵向排列，需设置flex-direction:column

控制子盒子在主轴上的排列顺序：justify-content 常用属性值：center space-around space-between

设置子盒子在侧轴上的排列顺序：aline-items 常用属性：center（只需要记住这一个即可）

弹性盒子模型默认是在主轴上排列，而且默认是不换行 如果想要子盒子换行显示，需添加flex-wrap：nowarp

子盒子属性值

order 子盒子的排列顺序 默认按照从小到大排列，开始为0 order改成-1可以改变排列顺序

align-self：自身的排列方式 常用属性值：center

4.3 如何使用flex布局写出完整的网页

（五）rem适配布局

5.1 关于rem 的一些话 ，借助rem认识 单位vw和vh

em： em根据当前盒子的字体大小确定1em=**px 如果当前盒子没有设定font-size 那么根据父盒子设定大小

rem：与em不同处在于，rem根据当前的html元素字体大小来确定1rem=**px 与当前盒子或者父盒子无关

vw： 英文单词：viewpoint width 很明显是视口宽度 常用 用于搭配响应式，在改变屏幕宽度时，视口宽度也会随之改变 那么1vw=**px也会发生改变

vh：与vw一样。viewpoint height 视口高度，不常用，毕竟在制作响应式布局时，我们只在乎屏幕宽度的变化，而不会在乎屏幕长度的变化

vw与vh应用：

.box {

width：10vw；

height：10vw；

}

5.2 准备工作

除了上述的设置视口标签 引入normalize.css 外 还需要

设置公共common.less文件

• 新建common.less 设置好最常见的屏幕尺寸，利用媒体查询设置不同的html字体大小，因为除了首页其他页面也需要

• 我们关心的尺寸有 320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px

• 划分的份数我们定为 15等份

  因为我们pc端也可以打开我们苏宁移动端首页，我们默认html字体大小为 50px，注意这句话写到最上面

  因为这套方案，是一套比较通用的方案，所以我直接处理成一个公共的文件：common.less

  // 设置常见的屏幕尺寸 修改里面的html文字大小 // 一定要写到最上面 ,老师的本意是，如果在pc端打开我们的界面，那么就是用这个写死的font-size:50px; //但是这个压根不会生效，如果pc界面打开，走的是最后一个min-witdh:750px，其实也是font-size:50px; html { font-size: 50px; } // 我们此次定义的划分的份数 为 15 @no: 15; //no ：number数字，老师写错了，一般我们会写成num // 320 @media screen and (min-width: 320px) { html { font-size: 320px / @no; } } // 360 @media screen and (min-width: 360px) { html { font-size: 360px / @no; } } // 375 iphone 678 @media screen and (min-width: 375px) { html { font-size: 375px / @no; } }

  // 384 @media screen and (min-width: 384px) { html { font-size: 384px / @no; } }

  // 400 @media screen and (min-width: 400px) { html { font-size: 400px / @no; } } // 414 @media screen and (min-width: 414px) { html { font-size: 414px / @no; } } // 424 @media screen and (min-width: 424px) { html { font-size: 424px / @no; } }

  // 480 @media screen and (min-width: 480px) { html { font-size: 480px / @no; } }

  // 540 @media screen and (min-width: 540px) { html { font-size: 540px / @no; } } // 720 @media screen and (min-width: 720px) { html { font-size: 720px / @no; } }

  // 750 @media screen and (min-width: 750px) { html { font-size: 750px / @no; } }

  新建index.less 这里面写首页的样式

  将刚才设置好的 common.less 引入到index.less里面

  @import “文件名”

  import:导入。引号里边的是导入的文件，可以不写后缀less

  index.less中： // 首页的样式less文件 @import "common"; // @import 导入的意思 可以把一个样式文件导入到另外一个样式文件里面 // link 是把一个 样式文件引入到 html页面里面 //总结：link和import，一个引入，一个导入，其实以上都一样，我中包含你 // 只不过使用场景不一样： // import是less语法，用于less文件导入less文件 // link是html语法，用于html引入css文件

5.3如何使用rem布局写出完整的网页

（六）适配布局bootstrap

6.1 准备工作

1.网上下载bootstrap

响应式分类

设备划分	尺寸区间
超小屏幕（手机）	< 768px
小屏设备（平板）	>= 768px ~ < 992px
中等屏幕（桌面显示器）	>= 992px ~ <1200px
宽屏设备（大桌面显示器）	>= 1200px

6.2 属性和属性值及用法

1.container

2.row

6.3 如何使用响应式布局写出完整的网页

写在最后面对的话，加油！只要能够将以上内容完整的有条理的整理出来，那么以后面对移动端任何布局的网页，都能够轻而易举的解决了！