移动端常见的布局

移动端常见的布局：
1.单独制作移动端页面
–流式布局(百分比布局)
–flex弹性布局
–less+rem+媒体查询布局
–混合布局

2.响应式页面
–媒体查询
–bootstrap

//=============================================================================

移动端web开发之流失布局
–移动端浏览器主要对webkit内核进行兼容，国产浏览器都是使用webkit内核；

//=============================================================================

视口
–布局视口(layout viewport)：一般移动端设备的浏览器默认设置了一个布局视口，IOS,Aandroid基本上将分辨率设置为980px，PC端上的页面以这个分辨率映射到手机上，只不过元素看上去小，一般可以通过手动缩放。

–视觉视口(visual viewport)：指的是用户看到的网站区域，通过缩放操作视觉视口，但不影响布局视口，布局视口仍然保持原来的宽度。

–理想视口(ideal viewport)：为了使网站在移动端有最理想的浏览和阅读宽度设定，理想视口是主要目的在于让布局视口的宽度与理想视口宽度一致，简单理解就是设备有多宽，布局视口就有多宽。

使用meta视口标签设置理想视口:
–

width=device-width ：设置视口宽度和设备宽度一致
user-scalable=no ：不允许用户缩放，‘yes’or’no’(1或0)
initial-scale=1.0 :初始缩放比
maximum-scale=1.0 :最大缩放比
minimum-scale=1.0 :最小缩放比

//=============================================================================

二倍图：
–物理像素点指的是屏幕显示的最小颗粒，1px在PC端中是一个物理像素，但是在移动端中是不一一对应的，1px能显示的
物理像素点的个数，称为物理像素比或屏幕像素比。

一般图片缩放采用width/2,height/2;
背景图缩放 background-size:背景图片宽度 背景图片高度;
–background-size:cover; //完全覆盖，等比例缩放，可能导致背景显示不全
–background-size:contain; //把图像扩展至最大尺寸，等比例拉升，宽度或高度到达盒子就不再拉伸，可能导致背景部分空白。

//=============================================================================

移动端CSS初始化：normalize.css
–保护了有价值的默认值
–修复了浏览器的bug
–是模块化的
–拥有详细的文档

//=============================================================================

特殊样式：
-webkit-tap-higlight-color:transparent; //清除点击高亮，设置为transparent 完全透明
-webkit-appearance:none; //在IOS上加上这个属性才能给按钮和输入框自定义样式
-webkit-touch-callout:none; //禁止长按页面时弹出菜单

//=============================================================================

max-width:; //最大宽度
max-height:; //最大高度
min-width:; //最小宽度
min-height:; //最小高度

//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
移动端web开发之flex布局：
–当父元素设为flex布局以后，子元素的float,clear,vertical-align属性将失效
–如果父元素设置了flex布局，子元素可以直接设置大小，不需要转换，隐式转换成行内块

flex布局父项常见属性：

flex-direction:; //设置主轴方向
–row(默认) 水平方向，从左往右
–row-reverse 水平方向，从右往左
–column 垂直方向，从上往下
–column-reverse 垂直方向，从下往上

注意：元素是跟着主轴排列的。如果没有为父元素设置flex-wrap属性，在父元素中插入子元素不会换行，会等比例改变所有子元素的宽度，子元素设置了宽度也会改变，但是margin值不变

justify-content:; //设置主轴上的子元素的排列方式
–flex-start(默认) 从主轴头部开始
–flex-end 在主轴尾部结束
–center 在主轴中间对齐
–space-around 平均分配剩余空间
–space-between 先两边贴边，再平分剩余空间

flex-wrap:; //设置flex布局中是否换行
–nowrap 默认 不换行
–wrap 换行

align-items:; //设置侧轴上的子元素排列方式（单行）
–flex-start(默认) 侧轴头部开始
–flex-end 在侧轴尾部结束
–center 在侧轴中间对齐
–stretch 沿侧轴拉伸，注意不可以给子元素高度

align-content:; //设置侧轴上的子元素排列方式（多行）
–flex-start(默认) 从侧轴头部开始
–flex-end 在侧轴尾部结束
–center 在侧轴中间对齐
–space-around 平均分配剩余空间
–space-between 先两边贴边，再平分剩余空间

flex-flow:;属性是flex-direction和flex-wrap属性的复合属性
–flex-flow:row wrap;

//=============================================================================

flex布局子元素常见属性:
–flex:; 定义子元素分配多少剩余空间,可以整数，可以百分比
–align-self:; 控制子元素自己在侧轴上的排列方式
–oder:; 控制子元素自己的位置排列顺序

//=============================================================================

背景颜色渐变:
background: -webkit-linear-gradient(left top,red,blue); //必须加浏览器私有前缀

//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

移动端web开发之less+rem+媒体查询布局
–rem是一个相对单位,类似em,em是父元素字体大小。
不同的是rem的基准是相对于html元素的字体大小。
可以通过改变html里面的文字大小来改变页面中所有元素的大小，实现整体控制

//=============================================================================

媒体查询(media query):CSS3新语法
–@media 针对不同的屏幕尺寸设置不同的样式

语法规范：
@media mediatype and|not|only (media feature:) and|not|only (media feature:) … {
CSS-Code;
}
–mediatype : all | print | scree
–media feature: width | min-width | max-width

通过媒体查询引入CSS文件：

//=============================================================================

Less基础：
–less变量：
定义变量语法：@变量名：值；
命名规范：以@为前缀，不包含特殊符号，不以数字开头，大小写敏感

–less嵌套：
子元素样式直接写在父元素里面
添加伪类、伪元素和交集选择器时，在当前选择器内层前面加"&"表示属于当前选择器的，而不是他的后代。

–运算符："+" “-” “*” “/”
运算符左右两侧必须空格隔开
两个数参与运算，如果一个数有单位，则最后的结果就以这个单位为准
如果多个数有单位，而且不一样，最后结果以第一个单位为准
颜色也可以参与运算
改变运算优先级，可以加括号

–文件导入：
@import “文件”;

//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

移动端web开发之响应式布局
–就是使用媒体查询针对不同宽度的设备进行布局和样式的设置

设备尺寸划分：
–超小屏幕 < 768px
–小屏幕 768px ~ 992px
–中等屏幕 992px ~ 1200px
–宽屏设备 >=1200px

bootstrap框架：
–响应式布局容器：
响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果
通过媒体查询来改变这个布局容器的大小，再改变子元素的排列方式和大小

–栅格系统：
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。