移动端常见布局方案

文章目录

一.基本概念：（1）移动端兼容性处理：主要处理webkit内核即可。（2）解决屏幕适配问题的方案：（3）物理像素比的问题：（4）移动端特殊样式的处理 二.移动端布局方案：1.单独制作移动端页:（1）流式布局（百分比布局）（2）弹性布局:（3）less+rem+媒体查询布局（4）混合布局 2.响应式页面兼容移动端:（1）响应式布局原理（2）bootstarp原理:

一.基本概念：

（1）移动端兼容性处理：主要处理webkit内核即可。

（2）解决屏幕适配问题的方案：

与视口相关的视口标签的设置（即移动端屏幕有多宽我们布局的视口就有多宽） layout view 视觉视口 ideal view理想视口

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">//移动端默认视口宽度为980px，为了适应不同宽度的屏幕，需要将width等于设备宽度。 <meta http-equiv="x-UA-compatible" content="ie-edge">

（3）物理像素比的问题：

屏幕开发清晰度问题，在pc端1px对应1个物理像素点，但是移动端的1px对应的物理像素点个数不一定，1px对应的物理像素越多，清晰度越高。 如：PC端的1个物理像素点对应的1px显示在移动端可能就是0.5px。

（4）移动端特殊样式的处理

-webkit-box-sizing:border-box //采用c3盒模型 -webkit-tab-highlight-color:transparent //点击默认高亮效果 -webkit-appearance:none //去除输入框，按钮的自定义样式 -webkit-touch-callout:none //禁止长按页面时的弹出菜单。

二.移动端布局方案：

1.单独制作移动端页:

单独制作页面时的布局方法包括：流式布局，弹性布局，less+rem+媒体查询，混合布局, 流式布局和弹性布局主要针对宽度的变化，而媒体查询+rem则让屏幕变化时元素的宽度和高度一起变化。

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

（2）弹性布局:

//父元素 display:flex flex-direction:column/row/row-reserve/column/reserve //设置主轴方向为水平或垂直或者水平翻转等 align-items:flex-start/flex-end/strech/center //单行元素的排列方式 align-content:flex-start/flex-end/strech/center/strech-around/strech-between //多行子元素的排列方式 justify-content:center/space-around //单个子元素的样式 flow-wrap:nowrap/wrap/wrap-reserve //控制是否换行 flex-flow:row wrap //是flex-direction和flow-wrap的综合。 //子元素 order:0 //各元素的排列顺序，默认为0，数值越小排列越靠前。 align-self:flex-start/flex-end/center //单个子元素在侧轴的排列方式。

（3）less+rem+媒体查询布局

less

//一：注释：在less中/**/会被编译出来，而//不会 //二：变量混入：@变量名：值 div(@size:20px){ font-size:@size; }//相当于下面的div样式 div{ font-size:20px } //三：嵌套 <style> div{ p{ h1{ } } } </style> <div> <p> <h1></h1> </p> </div> //四：运算：+ - * / //五：引入其他less文件：@import '**.less'

rem与em

<style> html{font-size:10px} div{font-size:10px} p{font-size:1em}//em参照父元素的字体大小 p{font-size:1rem}//rem参照根元素的字体大小 </style> <div> <p></p> </div>

媒体查询 是css3的新语法，用来设置不同宽度屏幕下的样式。即使用css样式就可以解决响应式布局

//实现方式一： <link rel="stylesheet" media="mediatype and/not/only (media-feature) {}" href="根据不同的media尺寸引入不同的样式文件"> //实现方式二： <style> @mediatype and/not/only (media-feature) { body{ background-color:pink } } </style> //================================================================= medidtype:媒体类型：all/print/screen/speech 用于所有设备，打印机，电脑手机屏幕，屏幕阅读器等 and/not/only:包括，排除，仅有某种媒体类型 media-feature:媒体功能:width/min-width/max-width 输出设备页面宽度，页面最小可视宽度，页面最大可视宽度

（4）混合布局

2.响应式页面兼容移动端:

（1）响应式布局原理

响应式布局基于媒体查询来设置屏幕宽度。所以在响应式布局中也可以使用媒体查询。 快速开发响应式布局的框架如bootstrap,它的原理包括：

（2）bootstarp原理:

布局容器

<div class="container"></div>//固定宽度 <div class="container-fluid"></div>//100%布局，适合单独做移动端开发

栅格系统

@media screen and (max-width:768px){ container:100% }//col-xs-超小屏幕：<768px,设置宽度100% @media screen and (min-width:768px){ container:750px }//col-sm-小屏幕：>=768,设置宽度750px @media screen and (min-width:992px){ container:970px }//col-md-中等屏幕：>=992px,设置宽度970px @media screen and (min-width:1200px){ container:1170px }//col-lg-大屏：>=1200px,设置宽度1170px <div class="col-xs-6 col-md-3"></div>//在屏幕划分为12份前提下，超小屏幕时该盒子占据6份，中等屏幕时占据3份 <div class="col-sm-offset-4"></div>//列向右偏移4个列的宽度 <div class="col-md-push-4"></div>//右推 <div class="col-md-pull-4"></div>//左拉 <div class="hidden-sm"></div>//在超小屏幕下隐藏 //在栅格系统列嵌套时会出现不能完全填充父盒子的问题，可以在他们的外面的加一个div来解决该问题,如以下。 <div class="container"> <div> <div class="col=md-6"></div> <div class="col=md-6"></div> </div> </div>