移动WEB开发的几种布局

移动布局之流式布局

兼容移动端主流浏览器，处理Webkit内核浏览器就可以了
视口：
1、布局视口：元素看上去小，默认通过手动缩放网页
2、视觉视口：用户看见的网站区域
3、理想视口：设备有多宽，我们布局的视口就多宽（手动添写meta视口标签通知浏览器操作）
想要理想视口，我们需要给移动端页面添加meta标签
meta视口标签

二倍图： 物理像素（分辨率）&物理像素比 在pc端一个物理像素就是1px，但是在移动端是不同的 在移动端里面一个物理像素和1px像素显示的不是一个一一对应的关系。 物理像素比：一个px的能显示的物理像素的个数 物理像素点越多看的越清楚（Retina视网膜屏幕） 2倍图：我们准备的图片比实际需要的大小大2倍，然后根据实际情况设置它的大小，这样放在手机上面才不会变得模糊。 背景缩放background-size属性规定屏幕图像的大小 background-size:图片的宽度 图片的高度; 1、只写一个参数肯定是宽度 高度省略了 但是高度会等比例缩放 2、里面的单位可以跟百分比，这个百分比相当于父盒子来说的。 3、要完全覆盖我们的div盒子，可能有部分背景图片显示不全。background-size:cover; cover把背景图像扩展到足够大，等比例拉伸。 4、contain 高度和宽度等比例拉伸，当宽度或者高度铺满div盒子就不再进行拉伸了。可能有部分空白区域。 切图片插件：cutterman 移动端技术解决方案： 1、非常支持H5和css3样式 2、css初始化推荐使用normalize.css/ 下载 npm install normalize.css 官网地址：http://necolas.github.io/normalize.css/ 3、css3盒子模型：box-sizing:border-box; padding和border不会再撑大盒子了。 传统模式：盒子宽度=css中设置的width+border+padding css3盒子模型：盒子宽度=css中设置的宽度width里面包含border和padding 传统盒子：box-sizing:content-box; 移动端全部用css3盒子，不考虑兼容性问题用c3，考虑兼容性问题用传统模型兼容性更高。 4、特殊样式 css3盒子模型 box-sizing:border-box; -webkit-box-sizing:border-box; 点击高亮我们需要清除 设置transparent完成透明 -webkit-tap-highlight-color:transparent; 在移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式 -webkit-appearance:none; 禁止长按页面时的弹出菜单 img,a{-webkit-touch-callout:none;} 移动端技术选型（移动端主流方案）： 1、单端制作移动端页面（主流）1）流式布局（百分比布局）2）flex弹性布局（强烈推荐）3）less+rem+媒体查询布局4）混合布局 2、响应式页面兼容移动端（其次）1）媒体查询2）bootstrap 图片默认和文字的基线对齐 使用vertical-align:middle; 让文字和图片居中对齐 定位不占位置

二倍精灵图做法：
1）在firework里面把精灵图等比例缩放为原来的一半
2）之后根据大小测量坐标
3）注意代码里面background-size也要写：精灵图原来宽度的一半。

position：fixed；固定定位
加了固定定位的盒子一定要给它设置宽度

img{
vertical-align: top;
}去除图片底部空白

当行内元素有了浮动之后可以不用再转换为块级元素了

box-sizing: border-box;/c3盒子模型可以把border算进去/

移动布局之flex布局

在移动端应用很广泛
pc端浏览器支持情况较差

1）当我们为父盒子设为flex布局以后，子元素的float，clear和vertical-align属性失效。
2）伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

总结flex布局原理：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。
首先给父项添加flex属性display：flex；再设置它其他的常见属性
flex布局父项常见属性：
1）flex-direction:设置主轴的方向（元素跟着主轴排列）
2）justify-content:设置主轴上的子元素的排列方式（先确认好主轴是哪个）（先两边贴边，再分配剩余的空间 justify-content：space-between；）
3）flex-wrap:设置子元素是否换行（默认的子元素是不换行的，如果装不开，会缩小元素的宽度，放到父元素里面）
4）align-content：设置侧轴上的子元素的排列方式（多行）在单行下没有效果
5）align-items：设置侧轴上的子元素排列方式（单行）（align-items：stretch；拉伸，但是子盒子不要给高度）
6）felx-flow：复合属性，相当于同时设置了flex-direction和flex-wrap

flex布局子项常见属性：
1）flex属性定义子项目分配剩余空间，用flex表示占多少份数（flex：;）

2)align-self控制子项自己在侧轴上的排列方式，可覆盖align-items属性

3）order属性定义项目的排列顺序
数值越小，排列越靠前，默认为0
注意：和z-index不一样。

固定的盒子应该有宽度position：flex；（它的宽度以屏幕为主，跟父级没有关系）
有定位的盒子写margin：0 auto；是无效的

使盒子到屏幕的中间：position：fixed；transform：translateX（-50%）；left：50%；

固定定位是不占位置的

文字阴影：text-shadow:1px 1px rgba(0,0,0,.2);

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

移动布局之rem布局

流式布局和flex布局主要针对宽度布局

em相对于父元素的字体大小来说的
rem相对于html元素字体大小来说的

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

媒体查询：@media可以针对不同屏幕尺寸设置不同的样式。
语法规范：
@media mediatype and|not|only(media feature){css-code;}
用@media开头注意@符号
mediatype媒体类型（不同终端设备划分不同类型—all print screen电脑屏幕）
关键字and且 not非 only
media feature媒体特性必须有小括号包含max-width min-width width

媒体查询可以根据不同屏幕尺寸在改变不同的样式

注释不能进行嵌套
文档声明（doctype）
文档声明用来告诉浏览器当前网页的版本

所有数据在计算机底层都会以二进制形式保存
可以将内存想象为一个有多个小格子组成的容器，每一个小格子中可以存储一个1或一个0
一个小格子在内存中被称为1位（bit）
8bit = 1byte(字节)
1024byte = 1kb(千字节)
1024kb = 1mb(兆字节)
1024mb = 1gb(吉字节)
1024gb = 1tb（特字节）
1024tb = 1pb

媒体查询从小到大代码优势
screen必须带上and不能省略，我们的数字后面必须跟单位。

引入资源就是针对不同屏幕尺寸调用不同的css文件

rem适配方案：
通过媒体查询更改html字体大小变化，然后页面元素使用rem做尺寸单位

实际开发适配方案：
按照设计稿与设备宽度比例，动态计算并设置html根标签的font-size大小
css中，按照比例换算为rem为单位的值

方案技术原理：
技术方案1：less 媒体查询 rem
技术方案2：flexible.js rem

1、选一套标准尺寸750为准
2、我们用屏幕尺寸除以我们划分的份数得到html里面文字大小，但是我们知道不同屏幕下得到的文字大小是不一样的
3、页面元素的rem值 = 页面元素在750px下的值 / html里面文字大小的值

固定定位的盒子必定有单位

去除input的蓝色边框在css中设置：outline：none;

flexible是按照当前屏幕大小直接划分的
所有要自己设置最大宽度和最小宽度
flexible.js的下载地址：
https://github.com/amfe/lib-flexible

px自动转化为rem
插件名：cssrem
这个插件默认html文字大小为16px
在设置中自行修改