移动web知识整理

视口

视口是浏览器展示页面内容的屏幕区域

mate视口标签

<mate name=”viewport” contehnt=”width=device-width,user-scalable=no,initial-scale=1.0,maxinum-scale=1.0,min1num-scale=1.0”

width=device-width 宽度设置为设备的宽度
user-scalable=no 是否允许用户缩放：不允许；值为yes或no（1或0）
initial-scale=1.0 初始缩放倍数，值为大于0的数字
maxinum-scale=1.0 最大缩放比，值为大于0的数字
min1num-scale=1.0 最小缩放比，值为大于0的数字

二倍图

设计稿里面每个元素的尺寸的倍数
作用:防止图片在高分辨率屏幕下模糊失真
做法：准备的图片比实际需要的大小大两倍
如果是二倍图，把设计图1x变成2x，宽度750px变375px
如：需要一个5050像素的图片，直接放到移动页面里面会放大两倍变成100100会模糊，所以采取：放一个100100的图片，然后手动地把这个图片缩小为5050像素，这种方式就是二倍图
.box{
原始图片100100px，手动缩小为5050
background-size:50px 50px;
}

backgroung-size:背景图片宽度背景图片高度
单位：长度|百分比|cober（把背景图像扩展至足够大，使背景图像完全按副高背景区域）| contain(把背景图像扩展至最大尺寸，使其宽度和高度完全适应内容区域)

二倍精灵图制作

在firework里面把精灵图等比例缩放为原来的一般，然后根据大小测量坐标，注意代码里面的background-size也要写为精灵图原来的宽度的一半

移动端开发选择

单独制作移动端页面（主流）
网页域名前一般加m可以打开移动端页面
流式布局（百分比布局）；flex弹性布局；less+rem+媒体查询布局；混合布局
响应式页面兼容移动端（其次）
媒体查询；bootstarp

流式布局（百分比布局）

通过盒子的宽度设置成百分比来根据屏幕的宽度进行伸缩，内容向两侧填充

flex布局（弹性布局）

flex布局用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局
当我们为盒子设为flex布局以后，子元素的float，clear和vertial-align属性将失效
伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
原理：给父盒子添加flex属性，来控制子盒子的位置和排列方式

flex布局父项常见属性

flex-direction 设置主轴的方向
默认主轴是x轴方向，行row，水平向右；侧轴是y轴方向，列column，水平向下
flex-direction:row; 默认值，从左到右
flex-direction:row-reserve;从右到左
flex-direction:colnum; 从上到下
flex-direction:columb-reserve;从下到上
justify-content 设置主轴上的子元素排列方式
属性值：
flex-start 默认值，从头部开始排列
flex-end 从尾部开始排列
center 在主轴居中对齐
space-around 平分剩余空间
apsce-between 先两边贴边，再平分剩余空间
flex-wrap 设置子元素是否换行
如在一行只能放下三个盒子，第四个盒子有溢出放不下了
如果不换行，那么会挤在这一行，显示不开那么会缩小每个盒子的大小
属性值：
nowrap 默认值，不换行
wrap 换行
align-content 设置侧轴上单子元素的排列方式（多行）
属性值：
strerch 默认值，拉伸
center 在侧轴居中对齐（挤在一起居中，垂直居中）
flex-start 从头部开始排列
flex-end 从尾部开始排列
align-items 设置侧轴上单子元素的排列方式（单行）
属性值：
flex-start 默认值，从头部开始排列
flex-end 从尾部开始排列
strerch 拉伸
center 在侧轴居中对齐（挤在一起居中，垂直居中）
flex-flow 复合属性，相当于同时设置了flex-direction和flex-wrap
如flex-flow:row wrap;

flex布局子项常见属性

flex子项占的份数
默认flex:0; 常用flex:1；
align-self控制子项自己在侧轴的哦排列方式
可覆盖align-items属性，默认值auto表示继承父元素的align-items属性，没有则等同于 strerch
order属性定义子项的排列顺序（前后顺序）
默认值0；数值越小，排列越靠前，和z-index不一样

rem适配布局让文字也能随屏幕大小变化而变化

rem单位

类似em是相对于父元素，rem相对的是html元素的大小，因此通过修改html元素大小可以修改里面的其他元素的大小

媒体查询 @media css3新语法

使用@media查询可以针对不同的媒体类型定义不同的样式
@media可以针对不同的屏幕尺寸设置不同的样式

语法规范：
@media 媒体类型关键字（媒体特性）{ css代码}
@media mediatype and|not|only (media feature){ css代码}
媒体类型 mediatype 值：all（用于所有设备）；scree（用于电脑屏幕，平板电脑，智能手机的等）；print（用于打印机和打印预览）
关键字值：and（可以将多个媒体特效链接到一起，相当于且）；
not（排除某个媒体类型，相当于非，可以省略）；
only（指定某个特定的媒体类型，可以省略）
媒体特性注意要加小括号包含起来
值：width(定义输出设备中页面可见区域的宽度)
min-width(定义输出设备中页面最小可见区域的宽度)
max-width(定义输出设备中页面最大可见区域的宽度)

rem+媒体查询实现元素动态大小变化

如:当屏幕宽度小于640时，文字大小会从100px变为50px
注意顺序先写小的再写大的
@media screen and (min-width:320px){
html{font-size:50px}
}
@media screen and (min-width:640px){
html{font-size:100px}
}

针对不同的媒体引入不同的css资源

语法：
《link rel=”stylesheet” media=”mediatype and|not|only (media feature)” href=”mystylesheet.css”>
比如当屏幕宽度大于640px时使用一个css样式，小于640px时使用另一个css样式

rem适配方案1：less+媒体查询+rem

less基础

是css的扩展语言。在css语法上加入程序式语言的特性，引入了变量，混入，运算，函数等功能，简化了css编写，减少了css的维护成本
网站 http://lesscss.cn/
less嵌套，运算

插件easy less

.less后缀的文件写完保存自动生成同名.css后缀的文件
.less文件的内容修改，对应的.css文件内容自动修改

ren适配方案2：flexinle.js+rem

原理：把当前设备划分为10等份，不同设备下比例一致，确定当前设备的html文字大小即可
如设计稿750px，那么只需要把html文字大小设置为75px，页面里的元素rem值=页面元素的px值/75
剩下的使用flexible.js去算
下载地址：http://github.com/amfe/lib-flexible
里面的clone or download–download zip
下载后的index.js或index.min.js

响应式开发

原理：使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备
响应式布局需要一个父级元素作为布局容器，通过父级元素尺寸的改变来对里面的子元素的排列方式和大小进行改变

Bootstrap 前端开发框架

中文网站：http://www.bootcss.com/
官网http://getbootstrap.com/
推荐http://bootstrap.css88.com/文档详细
简单引入：添加代码
《link href=”css/bootstrap.min.css” rel=”stylesheet”>
建议：把css,fonts,js文件都放到根目录里然后再使用

其他

swiper插件使用（滑动样式）

-下载地址http://www.swiper.com.cn
进入网站–获取swiper–下载swiper–下载一个.zip
打开–package–js–swiper.min.js放到目录下面
打开–package–css–swiper.min.css放到目录下

使用
到官网找到类似案例
在演示中想要的样式右上角有”新窗口打开”，点击进去–右键–查看网页源代码
复制html结构，css样式js语法，然后根据需求修改模块