移动端布局v2.0

移动端布局

一、视口

浏览器显示页面内容的屏幕区域

布局视口

视觉视口

理想视口

meta视口标签主要目的：布局视口和理想视口一致

二、meta标签

标准的完美的写法

​

width 宽度设置的是视口的宽度，设备宽度

initial-scale 初始缩放比 >0

maximum-scale 最大缩放比 >0

minimumscale 最小缩放比 >0

user-scalable 用户是否可以缩放，yes或是no（1/0）

三、二倍图

物理像素比：1px可以表示的物理像素快的个数

四、背景缩放

background-size 如果只写一个参数那就是宽度，而高度是等比例缩放，

​ 也可以跟百分比（相对于父盒子来说的）

​ 加cover把背景把盒子完全覆盖，并且是等比例缩放

​ 加contain是宽度高度等比例缩放到图片最大

五、移动端开发选择

单独制作移动端页面

​ 域名前加上m。 例如：m.jd.com

响应式页面兼容移动端

​ 随屏幕宽度变化改变的响应式

注：移动端初始化的文档是normalize.css

移动端的新盒子模型 ——width包括了所有的margin、padding、border

box-sizeing：border-box； content-box是传统的盒子模型

链接点击高亮：取消

a{

​ -webkit-top-highlight-color:transparent;

}

按钮外观取消

.b{

​ -webkit-appearance:none;

}

长按弹出右键菜单取消

img{-webkit-touch-callout:none;}

六、移动端常见的布局

技术选型：

1、单独制作

​ 流式布局（百分比布局）——主要看宽度

有max-width和min-width可以设置

​ flex弹性布局

less+rem+媒体查询布局

​ 混合布局

2、响应式页面

媒体查询

bootstarp

3、flex布局（display：flex；）

3.1 布局原理

任何一个容器都可以用flex，但是浮动已经失效，可以垂直居中，

大盒子用flex叫容器，其中的子容器叫项目，可以横向排，也可以竖着排。

3.2 父项的常见属性

flex-direction 设置主轴的的方向

​ row 左到右（默认）

​ row-reverse 右到左

​ column 上到下

​ column-reverse 下到上

justify-content 设置主轴上的子元素的排列方式

​ flex-start 头部对齐（默认）

​ flex-end 尾部对齐

​ center 居中对齐

​ space-around 剩余空间平均分配（margin）

​ space-between 两边贴边，剩余的平均分配

flex-wrap 设置子元素是否换行

​ flex中默认一行显示，如果父盒子不够大，那么项目就自动缩小相应的宽度，以便于所有可以一行显示。

​ wrap 换行

​ nowrap 不换行（默认）

align-content 设置侧轴上的子元素的排列方式（多行）

​ flex-start 头部对齐（默认）

​ flex-end 尾部对齐

​ center 居中对齐

​ space-around 剩余空间平均分配（margin）

​ space-between 两边贴边，剩余的平均分配

​ stretch 平分父盒子高度

align-items 设置侧轴上的子元素的排列方式（单行）

​ flex-start 头部对齐（默认）

​ flex-end 尾部对齐

​ center 居中对齐

​ stretch 拉伸 但是不要给盒子高度

flex-flow 相当于同时设置了flex-direction 和 flex-wrap

​ flex-flow: row wrap;

主轴/x轴（向右）和侧轴/y轴（向下）（默认下） 但是主侧轴可以自由设置

3.3 子项的常见属性

flex 项目分配剩余空间，表示占多少份（圣杯布局）

​ flex:1;

flex-self 给某个盒子设置单独的对齐方式 属性同前面的

​ flex-self:flex-start;

order 定义项目的排列顺序

​ order： 0；非z-index
实战演练中……
待续