移动端常见布局方案

文章目录

• 一.基本概念：
• （1）移动端兼容性处理：主要处理webkit内核即可。
• （2）解决屏幕适配问题的方案：
• （3）物理像素比的问题：
• （4）移动端特殊样式的处理

• 1.单独制作移动端页:
• （1）流式布局（百分比布局）
• （2）弹性布局:
• （3）less+rem+媒体查询布局
• （4）混合布局

• （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>