移动端及相关布局

一.浏览器现状

PC端浏览器
移动端浏览器

兼容移动端主流浏览器，处理webkit内核浏览器即可
移动端设置屏幕尺寸非常多，碎片化严重
安卓设备有多种分辨率
作为开发者无需关注这些分辨率，因为我们常用的尺寸单位是px

移动端调试方法

谷歌浏览器的模拟手机调试
搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器
使用外网服务器，直接IP或域名访问

二.视口

视口就是浏览器显示页面内容的屏幕区域，视口可分为布局视口，视觉视口和理想视口

1.布局视口layout viewport

一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题
ios 安卓基本都将这个视口分辨率设置为980px,所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页

2.视觉视口visual viewport

字面意思，它是用户正在看到的网站的区域，注意是网站的区域
我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度

3.理想视口 ideal viewport

为了使网站在移动端有最理想的浏览器和阅读宽度而设定
想要理想视口：需要手动添加meta视口标签通知浏览器操作
meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们的布局视口就有多宽

三.meta视口标签

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

属性
width 宽度设置的是ve=iewport,可以设置device-width特殊值
initial-scale 初始缩放比，大于0的数字
maximum-scale 最大缩放比，大于0的数字
minimum-scale 最小缩放比，大于0的数字
user-scalable 用户是否可以缩放，yes或no（1或0）

标准的viewport设置

视口宽度和设备保持一致
视口的默认缩放比例1.0；
不允许用户自行缩放
最大允许的缩放比例1.0;
最小允许的缩放比例1.0;
标准写法：

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

四.二倍图

1.物理像素和物理像素比

物理像素指的是屏幕显示的最小颗粒，是物理中是真实存在的，这是厂商在出厂时就设置好了，物理像素：分辨率
我们开发时候的1px不是一定等于1个物理像素的
PC端页面，1个px等于1个物理像素，但是移动端就不尽相同
一个px(电脑设置的，开发尺寸)的能显示的物理像素的个数，称为物理像素比或屏幕像素比
例如iphone8的物理像素比是2

1. iphone8的物理像素750
2. 在iphone8里面的 1px 开发像素 =2个物理像素

PC端和早期的手机屏幕/普通手机屏幕，1CSS像素=1物理像素的
视网膜屏幕是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度。存在倍数关系，一对多

2.多倍图

把电脑端放在手机里会出现模糊情况
在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题
通常使用二倍图，因为iphone6/7/8的影响，但是现在还存在3倍图4倍图的情况，这个看具体情况
背景图片：注意缩放问题
语法：

    /* 在iphone8下面 */
    img{
        /* 原始图片100*100px */
        width:50px;
        height:50px;
    }

3.背景缩放background-size

background-size属性规定背景图像的尺寸
语法：
background-size;背景图片宽度 背景图片高度；

1. 只写一个参数，肯定是宽度，高度省略了，会等比例缩放
2. 里面的单位可以跟%，相对于父盒子来说的
3. cover:把背景图像扩展至足够大，以使背景图完全覆盖背景区域，可能会有部分信息丢失，部分背景图片显示不全
   拉伸过程中 ，宽度够了，但高度不够，会继续拉伸，会导致部分背景图片显示不全
4. contain把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域，可能会有部分空白区域
   拉伸过程中 ，如果宽度或够了，就不再进行拉伸了等比例进行缩放

4.多倍图切图

cutterman ios @2X

五.移动端开发选择

移动端主流方案：

1. 单独制作移动端页面（主流）
2. 响应式页面兼容移动端（其次）

1.单独制作移动端页面

是根据设备来进行判断的
通常情况下，网址名前加m(mobile)可以打开移动端，通过判断设备，如果是移动设备打开，则跳到移动端页面

2.响应式

就写一个页面
改变屏幕的宽度开改变样式，判断浏览器的宽度不同，页面的宽度也不同
缺点：制作起来相对麻烦，需要花很大精力去调兼容性

CSS初始化normalize.css

官网地址：http://necolas.github.io/normalize.css/

六.移动端特殊样式

<!-- CSS3盒子模型 -->
box-sizing:border-box;
-webkit-box-sizing:border-box;
<!-- 想去掉对于移动端链接点击背景会显示蓝色,清除点击高亮 -->
-webkit-tap-highlight-color:transparent;
<!-- 想去掉对于按钮的外观效果，想去掉浏览器的自带样式 -->
-webkit-apperance:none;
<!-- 禁止长按页面时的弹出菜单 -->
img,a{
    -webkit-touch-callout:none;
}

七.移动端常见布局

1. 单独制作移动端页面（主流）

流式布局
flex弹性布局(强烈推荐)
less+rem+媒体查询布局
混合布局

2. 响应式页面兼容移动端(其次)

媒体查询
bootsrap

1.流式布局

流式布局:百分比布局,也称非固定像素布局
通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充
流式布局是移动web开发使用的比较常见的布局方式

max-width:最大宽度(max-height最大高度)
mix-width:最小宽度(mix-height最小高度)

图片注意加vertical-align:middle

2.flex布局

布局原理:

display:flex;

flex是flexible box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局

当我们为父盒子设为flex布局以后,子元素的float,clear和vertical-align属性都将失效
伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

采用flex布局的元素,成为flex容器,简称"容器",它的所有子元素自动成为容器成员,称为"flex项目",简称"项目"
子容器可以横向排列(默认)也可以纵向排列

总结:

就是通过给父盒子添加flex属性,来控制子盒子的位置盒排列方式

flex布局父项常见属性

flex-direction:设置主轴的反向
justify-content:设置主轴上的子元素排列方式
flex-wrap:设置子元素是否换行
align-content:设置侧轴上的子元素的排列方式(多行)
align-items:设置侧轴上的子元素的排列方式(单行)
flex-flow:复合属性,相当于同时设置了flex-direction ,flex-wrap

flex-direction::设置主轴的反向

1. 主轴和侧轴

在flex布局中,食分为主轴和侧轴两个方向,同样的叫法:行和列,x 轴和y 轴

默认主轴的方向就是X轴:水平向右
默认侧轴的方向就是y轴:水平向下

2. 属性值
   注意:主轴和侧轴是会变化的,就看flex-direction设置为主轴,剩下的就是侧轴,而我们的子元素就是跟着主轴来排列的
   row 默认从左到右
   row-reverse 从右到左 顺序改变
   column 从上到下
   column-reverse 从下到上

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

justify-content属性定义了项目在主轴上的对齐方式
注意:使用这个属性之前一定要确定好主轴是哪个

flex-stat 默认值从头部开始,如果是x轴,则从左向右
flex-end 从尾部开始,如果是X轴,则从右向左
center 在主轴居中对齐(如果是x轴,则水平居中)
space-around 平分剩余空间
spce-between 先两边贴边,再平分剩余空间

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

默认情况下项目都排在一条线(又称"轴线")上,flex-wrap属性定义,flex属性定义,flex布局中默认是不换行的
如果装不开,会缩小子元素的宽度,放到父元素里面

nowrap 默认值,不换行
wrap 换行

align-items:设置侧轴上的子元素的排列方式(单行)

该属性是控制子项在侧轴(默认是y轴)上的排列方式,在子项为单项(单行)的时候使用
flex-start 从上到下
flex-end 从下到上
center 挤在一起居中(垂直居中)
stretch 拉伸(默认值),如果主轴是X轴,子盒子不要给高度,果主轴是y轴,子盒子不要给宽度

align-content:设置侧轴上的子元素的排列方式(多行)

该属性是控制子项在侧轴(默认是y轴)上的排列方式,并且只能用于子元素出现换行的情况下(多行),在单行下是没有效果的.

flex-start 默认值在侧轴的头部开始排列
flex-end 在侧轴的尾部开始排列
center 在侧轴中间显示
space-around 子项在侧轴平分剩余空间
space-between 子项在侧轴先分布在两头,再平分剩余空间
stretch 设置子项元素高度平分父元素高度

适用于换行情况下

flex-flow:复合属性,相当于同时设置了flex-direction ,flex-wrap

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

flex布局子项常见属性

flex子项目的份数
align-self控制子项自己在侧轴的排列方式
order属性定义子项的排列顺序（前后顺序）

flex属性

flex属性定义子项目分配剩余空间，用flex来表示占多少份数
.item{
flex:默认为0
}

align-self控制子项自己在侧轴的排列方式

align-self属性允许单个项目与其他项目不一样的对齐方式，可覆盖align-items属性
默认值为auto,表示继承父元素的align-items属性,如果没有父元素，则等同于stretch

order属性定义子项的排列顺序（前后顺序）

数值越小，排列越靠前，默认为0；
注意和z-index不一样

线性渐变
background:linear-gradient(起始方向，颜色1，颜色2，…);
background:-webikt-linear-gradient(left,red,blue);从左开始由红到蓝
background:-webikt-linear-gradient(left top,red,blue);从左上角开始由红到蓝

默认从上到下
让文字跟随屏幕的大小的变化而变化
高度也跟随屏幕的大小而自适应
屏幕发生变化时，高度和宽度等比例缩放

3.rem布局

让文字跟随屏幕的大小的变化而变化
高度也跟随屏幕的大小而自适应
屏幕发生变化时，高度和宽度等比例缩放

1. rem单位

root em是一个相对单位，em 是相对于父元素的字体大小
不同的是rem的基准是相对于html的字体大小
比如，根元素设置的font-size:12px;非根元素设置width:2rem,则转换成px就是24px;

优势：可以通过修改html的文字大小来改变页面中元素的大小，可以整体控制

2.媒体查询

媒体查询（Media Query）是CSS3新语法

使用媒体查询，可以针对不同的媒体类型定义不同的样式
媒体查询可以对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
目前针对很对设备都使用媒体查询。

1.语法规范

@media mediatype and|not|only (media feature){
    css-code;
}

mediatype 媒体类型
关键字and not only
media feature媒体特性 必须有小括号包含

1. 媒体类型
将不同的终端设备划分成不同的类型，称为媒体类型

all 用于所有设备
print 用于打印机预览
screen 用于电脑屏幕，平板电脑，智能手机等

2.关键字

and 可以多个媒体特性连接到一起
not 排除某个媒体类型，相当于“非”，可以省略
only 指定某个特性的媒体类型，可以省略

3.媒体特性
注意要用小括号包含

width 定义输出设备中页面可见区域的宽度
min-width 定义输出设备页面最小可见区域宽度
max-width 定义输出设备页面最大可见区域宽度

根据页面的宽度来改变背景颜色的案例原理

按照从大到小的或者从小到大的思路
注意我们有最大值max-width和最小值min-width都是包含等于的
当屏幕小于540px，背景颜色为蓝色（x<=539）
当屏幕大于540px并且小于等于969像素的时候为绿色（540<=x<=969）
当屏幕大于等于970像素的时候，背景颜色为红色（x<=970）
尽量从小到大，利用层叠性，更简洁
注意and一定要写上，数字后面必须跟单位

3.媒体查询+rem 实现元素动态元素大小

看案例实现元素动态元素大小

4.媒体查询引入资源

对于大屏的样式和小屏的样式不一样的时候
对于不同的屏幕尺寸引入不同的CSS文件
从小到大的顺序的写
语法规范

<link rel="stylesheet" href="./CSS/style640.css"media="meidatype and|not|only  (media feature)">

5.rem适配方案

适配，当前设备尺寸发生变化时，等比例适配当前设备

技术方案1 单位rem less 媒体查询

按照设计稿与设备宽度的比例，动态计算并设置html跟标签的font-size大小（媒体查询）
CSS中，设计稿元素的宽、高、相对位置等取值，按照等比例换算为rem为单位的值

一般情况下，我们以一套或两套效果图适应大部分的屏幕，放弃极端或对其进行优雅降级，牺牲一些效果，现在基本以750为准

元素大小取值方法：
最后的公式：页面元素的rem值=页面元素值（px）/（屏幕宽度/划分的份数）
屏幕宽度/划分的份数就是html font-size的大小
或者：页面元素的rem值 = 页面元素值（px）/ html font-size字体大小

技术方案2 （推荐）
flexible.js rem