移动端页面布局

迷南。 2022-04-23 16:10 405阅读 0赞

## 一、移动端app分类 ##

### 1、Native App原生app手机应用程序 ###

使用原生的语言开发的手机应用，Android系统用的是java，ios系统用的是object-C

### 2、Hybrid App 混合型app手机应用程序 ###

混合使用原生的程序和html5页面开发的手机应用

### 3、Web App 基于Web的app手机应用程序 ###

完全使用html5页面加前端js框架开发的手机应用

## **二、Viewport视口** ##

视口是移动设备上用来显示网页的区域，一般会比移动设备可视区域大，宽度可能是980px或者1024px，目的是为了显示下整个为PC端设计的网页，这样带来的后果是移动端会出现横向滚动条，为了避免这种情况，移动端会将视口缩放到移动端窗口的大小。这样会让网页不容易观看，可以用meta标签，name="viewport"来设置视口的大小，将视口的大小设置为和移动设备可视区一样的大小。

### 设置方法如下： ###

### <meta name="viewport" content="width=device-width,user-scale=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"> ###

## 三、PC及移动端页面适配方法 ##

设备有多种不同的分辨率，页面适配方案有如下几种：

### 1、全适配：流体布局+响应式布局 ###

### 2、移动端适配： ###

a、流体布局+少量响应式

b、基于rem的布局

c、弹性合模型

## a、流体布局 ##

就是使用百分比来设置元素的宽度，元素的高度按实际高度写固定值，流体布局中，元素的边线（border）无法用百分比，可以使用样式中的计算函数calc()来设置宽度，或者使用box-sizing属性将盒子设置为边线计算盒子尺寸。

### 1、calc()  可以通过计算的方式给元素加尺寸。比如：width:calc(25% - 4px); ###

### 2、box-sizing ###

a、content-box 默认的盒子尺寸计算方式。

b、border-box 置盒子的尺寸计算方式为从边框开始，盒子的尺寸，边框和内填充算在盒子尺寸内

![format_png][]

## 响应式布局 ##

响应式布局就是使用媒体查询的方式，通过查询浏览器的宽度，不同的宽度应用不同的样式块，每个样式块对应的是该宽度下的布局方式，从而实现响应式布局，响应式布局的页面可以适配多种终端屏幕（pc、平板、手机）。

相应布局的伪代码如下：

![format_png 1][]

## b、基于rem的布局 ##

### 1、em单位是参照元素自身的文字大小来设置尺寸 ###

![format_png 2][]![format_png 3][]

### 2、rem指的是参照根节点的文字大小。 ###

根节点指的是html标签，设置html标签的大小，其他的元素相关尺寸设置用rem，这样，所有元素都有了统一的参照标准，改变html文字的大小，就会改变所有元素用rem设置的尺寸大小。

![format_png 4][]![format_png 5][]

###  cssrem安装：cssrem插件可以动态地将px尺寸换算成rem尺寸 ###

下载本项目，比如：git clone https://github.com/flashlizi/cssrem 进入packages目录：Sublime  Text-》Preferences-》Browse  Packages  复制下载的cssrem目录到刚才的packages目录里。重启Sublime  Text。

配置参数  参数配置文件：Sublime  Text-》Preferences-》Package  Settings-》cssrem 里面有个px\_to\_rem （意思是px转rem的单位比例，默认为40）。max\_rem\_fraction\_length（px转rem的小数部分最大的长度。默认为6）。availiable\_file\_types 启用此插件的文件类型。默认为：\[".css"，".less"，"sass"，".html"\]。

![format_png 6][]

## c、弹性盒模型布局 ##

### 1、容器属性 display:flex  声明使用弹性盒布局(全部都是在父元素上设置) ###

使用display:flex相对于把子元素变为行内块元素，并且之间不会产生间隙。

![format_png 7][]![format_png 8][]![format_png 9][]![format_png 10][]

**　　确定子元素排列的方向: flex-direction:row | row-reverse|column|column-reserve**

**　　a、 flex-direction:row **默认子元素水平靠左排列

![format_png 11][]![format_png 10][]

**　b、 flex-direction:row-reverse  **子元素靠右倒序排列，类似于右浮动

![format_png 12][]![format_png 13][]

**　c、 flex-direction:column;** 竖排

![format_png 14][]![format_png 15][]

**　d、 flex-direction:column-reverse;** 倒序竖排

![format_png 16][]![format_png 17][]

**　　元素超过父容器尺寸时是否换行: flex-wrap:nowrap|wrap|wrap-reverse**

**　　a、flex-wrap:nowrap； 子元素宽度超过父级宽度时，默认不换行  **

![format_png 18][]![format_png 19][]

**b、flex-wrap:wrap； 子元素宽度超过父级宽度时，换行 **

![format_png 20][]![format_png 21][]

**c、flex-wrap:wrap-reserve； 子元素宽度超过父级宽度时，倒序换行 **

![format_png 22][]![format_png 23][]

同时设置flex-direction | flex-wrap如： flex-flow:**flex-direction | flex-wrap  flex-flow:row  wrap;**

**　　子元素的尺寸确定之后，用此属性来设置flex-direction定义方向上的分布方式：justify-content:flex-start | flex-end | center | space-between | space-around**

**　　a、justify-content:flex-start  整体子元素靠左**

**![format_png 24][]![format_png 25][]**

**　　b、justify-content:flex-end  整体子元素靠右**

![format_png 26][]![format_png 27][]

**c、justify-content:center  整体子元素居中**

![format_png 28][]![format_png 29][]

**d、justify-content:space-between  第一个子元素靠左顶格，最后一个子元素靠右顶格，中间子元素均分距离**

![format_png 30][]![format_png 31][]

**e、justify-content:space-around  第一个子元素靠左的间距和最后一个子元素靠右的间距是中间子元素间距的一半，中间的元素等分间距。**

![format_png 32][]![format_png 33][]

**　　子元素的尺寸确定之后，用此属性来设置flex-direction定义方向上的垂直方向的分布方式：align-items:flex-start | flex-end | center | baseline | stretch**

**　　a、align-items:flex-start  整体垂直靠上排列**

**![format_png 34][]![format_png 35][]**

**b、align-items:flex-end  整体垂直靠下排列**

![format_png 36][]![format_png 37][]

**c、align-items:center  整体子元素垂直居中（也可以使用margin或padding或定位来实现）**

![format_png 38][]![format_png 39][]

**d、align-items:baseline  子元素内的文字底部对齐，如果文字大小不同，会导致子元素底部不对齐**

![format_png 40][]![format_png 41][]

e**、align-items:stretch  如果子元素不设置高度，高度会被拉伸到和父元素高度相同（除去自身的margin）**

![format_png 42][]![format_png 43][]

**a、align-content : flex-start  多行整体靠上排列**

**![format_png 44][]![format_png 45][]**

**b、align-content : flex-end 多行整体靠下排列**

**![format_png 46][]![format_png 47][]**

**c、align-content :center 多行整体居中排列**

**![format_png 48][]![format_png 49][]**

**d、align-content:space-between  第一行子元素靠上顶格，最后一行子元素靠下顶格，中间行子元素等分垂直的间距**

![format_png 50][]![format_png 51][]

### **2、条目属性** ###

**　　同时设置flex-grow和flex-shrink以及flex-basis 如：flex:none | <'flex-grow' ><'flex-shrink'>'?||<'flex-basis'>**

**　　表示当父元素又多余的空间时，这些空间在不同子元素质检的分配比例。flex-grow:number**

**　　当父元素的空间不足时，各个子元素的尺寸缩小的比例。flex-shrink:number**

**　　用来确定弹性条目的初始主轴尺寸。flex-basis:length|precentage|auto|content**

**　　改变条目在容器中的出现顺序。order:integer**

[format_png]: /images/20220224/003344be01c04d1190cd73bb4385160c.png
[format_png 1]: /images/20220224/1fa49af3da144cd78c6dacd286b91fba.png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvODEwNTE0LzIwMTcwNy84MTA1MTQtMjAxNzA3MTIxMjU5MDU5NjItMjEwNjEzMzAzLnBuZw?x-oss-process=image/format,png
[format_png 3]: /images/20220224/332f7985513f405ab6d7be2e745f7b99.png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvODEwNTE0LzIwMTcwNy84MTA1MTQtMjAxNzA3MTIxMzE2NDIzNTMtMTg4NjE1MTYyNi5wbmc?x-oss-process=image/format,png
[format_png 5]: /images/20220224/ec481edffc0a4ac5a128ce660fca35db.png
[format_png 6]: /images/20220224/879714e51a444f67a47270aaf4fb76b1.png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvODEwNTE0LzIwMTcwNy84MTA1MTQtMjAxNzA3MTMxMjI1MDM3OTAtNDk5Mjc3NTUzLnBuZw?x-oss-process=image/format,png
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvODEwNTE0LzIwMTcwNy84MTA1MTQtMjAxNzA3MTMxMjI1NDEwMjUtNDI3MzI5MjMzLnBuZw?x-oss-process=image/format,png
[format_png 9]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvODEwNTE0LzIwMTcwNy84MTA1MTQtMjAxNzA3MTMxMjI2MTU3MjgtNDUzNDU5MTYwLnBuZw?x-oss-process=image/format,png
[format_png 10]: /images/20220224/5134bdc66fb3456796abd7a4855c80f0.png
[format_png 11]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvODEwNTE0LzIwMTcwNy84MTA1MTQtMjAxNzA3MTMxMjQwMzE2NjUtNDcyNTY3NjcucG5n?x-oss-process=image/format,png
[format_png 12]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvODEwNTE0LzIwMTcwNy84MTA1MTQtMjAxNzA3MTMxMjQyMjc4NjgtMzU4NjM1ODI4LnBuZw?x-oss-process=image/format,png
[format_png 13]: /images/20220224/57cbb7eaa9544af1877ea88db7fc001b.png
[format_png 14]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvODEwNTE0LzIwMTcwNy84MTA1MTQtMjAxNzA3MTMxMjQ0MTA0MzEtMzY2NDQ1OTYyLnBuZw?x-oss-process=image/format,png
[format_png 15]: /images/20220224/8972473c508b4cba954561d6500cc5a7.png
[format_png 16]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvODEwNTE0LzIwMTcwNy84MTA1MTQtMjAxNzA3MTMxMjQ1MzA4MjItODAwMzcyMDYwLnBuZw?x-oss-process=image/format,png
[format_png 17]: /images/20220224/6fe7019dde4e4cdc9a920ee742e52391.png
[format_png 18]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvODEwNTE0LzIwMTcwNy84MTA1MTQtMjAxNzA3MTMxMjQ5MzkxMDMtNDQzMzU5MTE0LnBuZw?x-oss-process=image/format,png
[format_png 19]: /images/20220224/f09d161338744f3ba1ef1f20c454caaf.png
[format_png 20]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvODEwNTE0LzIwMTcwNy84MTA1MTQtMjAxNzA3MTMxMjUzMjcyOTAtNDkzMzQ4NDkzLnBuZw?x-oss-process=image/format,png
[format_png 21]: /images/20220224/bf0c8ffc53444188bb6d6349e6f5a37c.png
[format_png 22]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvODEwNTE0LzIwMTcwNy84MTA1MTQtMjAxNzA3MTMxMjU0NDE2OTctMTczNzY0NTc5NS5wbmc?x-oss-process=image/format,png
[format_png 23]: /images/20220224/c6be5f80b89d4dd9bbb428383247c579.png
[format_png 24]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvODEwNTE0LzIwMTcwNy84MTA1MTQtMjAxNzA3MTMxMzAwMDIxODEtMTY4ODk0MjY2OS5wbmc?x-oss-process=image/format,png
[format_png 25]: /images/20220224/8e7296d1b39d4335a1150f41b5609787.png
[format_png 26]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvODEwNTE0LzIwMTcwNy84MTA1MTQtMjAxNzA3MTMxMzAzMTk3NzUtNjM3MzQwODQ3LnBuZw?x-oss-process=image/format,png
[format_png 27]: /images/20220224/ebffc5885dea4fb79f66fa7512750d30.png
[format_png 28]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvODEwNTE0LzIwMTcwNy84MTA1MTQtMjAxNzA3MTMxMzA1MDEzMjItMTA0MzE0NzA0Mi5wbmc?x-oss-process=image/format,png
[format_png 29]: /images/20220224/de1e342e9b834832b9dc13144708c887.png
[format_png 30]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvODEwNTE0LzIwMTcwNy84MTA1MTQtMjAxNzA3MTMxMzA4NTMwNTYtMTA0OTMwNzUxNy5wbmc?x-oss-process=image/format,png
[format_png 31]: /images/20220224/b04c89ad7c8647d88c902719a5d6dd73.png
[format_png 32]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvODEwNTE0LzIwMTcwNy84MTA1MTQtMjAxNzA3MTMxMzE0NTc4MDYtMTc5OTg3MzYzMi5wbmc?x-oss-process=image/format,png
[format_png 33]: /images/20220224/a6e886fab1f74ce38218c82e39710b4f.png
[format_png 34]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvODEwNTE0LzIwMTcwNy84MTA1MTQtMjAxNzA3MTMxMzIxMDM5OTMtMTEyNjM0MzYxLnBuZw?x-oss-process=image/format,png
[format_png 35]: /images/20220224/cb53599ba00543959f8cc0e308732b45.png
[format_png 36]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvODEwNTE0LzIwMTcwNy84MTA1MTQtMjAxNzA3MTMxMzIyMzg2MTgtMTg0ODkxOTcwNC5wbmc?x-oss-process=image/format,png
[format_png 37]: /images/20220224/d8c8cd7d6e6d46a392ae060c69719a19.png
[format_png 38]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvODEwNTE0LzIwMTcwNy84MTA1MTQtMjAxNzA3MTMxMzIzNTQ2MDMtMTQxMDg5NDU1OC5wbmc?x-oss-process=image/format,png
[format_png 39]: /images/20220224/d48280499a2b43098cda192e8d160347.png
[format_png 40]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvODEwNTE0LzIwMTcwNy84MTA1MTQtMjAxNzA3MTMxMzM0MTU0OTMtNzU4NjYxMTU3LnBuZw?x-oss-process=image/format,png
[format_png 41]: /images/20220224/1a64e12114ba4aa282f6e5c5f9fb2c64.png
[format_png 42]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvODEwNTE0LzIwMTcwNy84MTA1MTQtMjAxNzA3MTMxMzM3NTg1NDAtMTg4OTk3MzEwNC5wbmc?x-oss-process=image/format,png
[format_png 43]: /images/20220224/ef7ce4124ee348f8b5406879fd854b18.png
[format_png 44]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvODEwNTE0LzIwMTcwNy84MTA1MTQtMjAxNzA3MTMxMzQ3NDcwNTYtMjAwMzY1NDcxMi5wbmc?x-oss-process=image/format,png
[format_png 45]: /images/20220224/89888af68579494abfd038f7e0ab6cd8.png
[format_png 46]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvODEwNTE0LzIwMTcwNy84MTA1MTQtMjAxNzA3MTMxMzQ4NTM2MDMtMTIwMDg4MjE3OC5wbmc?x-oss-process=image/format,png
[format_png 47]: /images/20220224/5c82c86c3376477c9d3ebe40b6db8eb5.png
[format_png 48]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvODEwNTE0LzIwMTcwNy84MTA1MTQtMjAxNzA3MTMxMzUwMDIzMzctMjA4NDQ5NzkwMS5wbmc?x-oss-process=image/format,png
[format_png 49]: /images/20220224/e7682f7bd9f1440db1a508eb517064cc.png
[format_png 50]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvODEwNTE0LzIwMTcwNy84MTA1MTQtMjAxNzA3MTMxMzUzMTYzNTMtMjEyMjM2MDAwMi5wbmc?x-oss-process=image/format,png
[format_png 51]: /images/20220224/ed6675d8ea8b4f149c507a57058b2316.png