移动端开发技术小结(前端)

移动端开发技术小结(前端)

移动端处理webkit内核即可,浏览器的私有前缀只需要考虑添加 webkit

布局视口 视觉视口

理想视口(将布局宽度改为视觉视口)

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

图片(2倍图,3倍图)

背景缩放:background-size: 背景图片宽度 背景图片高度 cover|contain;(css3新增)
	cover完全覆盖盒子 contain高度或者宽度一个到了就可以
ps中的cutterman插件切图

移动端公共样式

推荐normalize.css | reset.css

 http://necolas.github.io/normalize.css/

大量使用css3盒子模型

/*CSS3盒子模型*/
box-sizing: border-box;  border和padding不会撑开盒子
/*传统盒子模型*/
box-sizing: content-box;

移动端特殊样式

/*CSS3盒子模型*/
-webkit-box-sizing: border-box;
box-sizing: border-box;
/*点击高亮我们需要清除,设置为transparent 透明*/
-webkit-tap-highlight-color: transparent;
/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance: none;
/*禁用长按页面时的弹出菜单*/
img,a { -webkit-touch-callout: none; }

适配方案

单独移动端页面(主要方法)

1.流式布局（百分比布局）

关注宽度,按百分比来开发,一般还会设置最大最小宽度 max-width min-width

2.flex 弹性布局（推荐）

IE11或更低版本不支持flex或仅支持部分
display:flex; css3新增

父盒子属性

flex-direction：设置主轴的方向
flex-wrap：设置子元素是否换行
justify-content：设置主轴上的子元素排列方式 
	flex-start flex-end center space-around space-between(2边贴边 再平分剩余空间)
align-content：设置侧轴上的子元素的排列方式（多行）
	flex-start flex-end center stretch
align-items：设置侧轴上的子元素排列方式（单行）
	flex-start flex-end center stretch space-around space-between

子盒子属性

flex属性 分配子项占多少份数 felx:1
align-self属性 控制子项在侧轴上的排列方式,可覆盖 align-items 属性
order属性 定义项目的排列顺序 默认0 越小排的越前

flex: flex-grow、flex-shrink、flex-basis 三兄弟详解
伸缩份数
1)flex-grow 默认0 设正数 !主轴方向有剩余空间
  如果flex-grow的总和大于1,每个item扩展尺寸为：容器的剩余尺寸 * flex-grow/sum(grow)
  如果flex-grow的总和小于1,每个item扩展尺寸为：容器的剩余尺寸 * flex-grow
2)flex-shrink 默认0 设正数  !主轴方向超出空间
  如果flex-shrink的总和大于1,每个item收缩尺寸为：超出尺寸 * 收缩比例 / 所有flex items收缩比例之和
  如果flex-shrink的总和小于1,每个item收缩尺寸为：超出尺寸 * sum * 收缩比例 / 所有flex items收缩比例之和
)flex-basis  设置在主轴方向的基础size
  绝对flex items的最终尺寸优先级
  max-width/max-height/min-width/min-height > basis > width/height > 内容的尺寸
  不设置的话, 不参与伸缩

一般初始化示例:
body {
  max-width: 540px;
  min-width: 320px;
  margin: 0 auto;
  font: normal 14px/1.5 Tahoma,"Lucida Grande",Verdana,"Microsoft Yahei",STXihei,hei;
  color: #000;
  background: #f2f2f2;
  overflow-x: hidden;
}

3.rem+媒体查询布局

• rem

  root em一个相对单位，类似于em，em是父元素字体大小
  html {
  font-size: 12px;
  }//此时1rem=12px

  媒体查询
  @media screen and (min-width:320px) {
  CSS-Code;html{font-size:60px;}
  }//如果屏幕宽度≥320px,执行css代码
  @media screen and (max-width:750px) {
  CSS-Code;
  }//如果屏幕宽度≤750px,执行css代码
  !!!移动端的开发，一般从小到大，利用层叠性，简化代码量

  css冗余度高，维护不易，没有计算能力,css预处理器 less/sass/stylus 参看css预处理器文件

• rem适配方案

  页面元素的rem值=页面元素值(px)/(屏幕宽度/划分的份数)
  页面元素的rem值=页面元素值(px)/html font-size字体大小
  1rem = 设计稿屏宽/划分份数 = html的font-size

  flexible.js+rem(能够实现平滑动态改变)
  https://github.com/amfe/lib-flexible github地址
  flexible是默认将屏幕分为10等分
  VSCode px转换rem插件cssrem
  首选项->设置->输入cssrem->cssrem.rootFontSize属性编辑->更改为开发时设计稿的1rem对应的px值

4.混合布局(flex,rem混合使用)

5.vm+插件,postcss-px-to-viewport

往后主流方向是vw,vh…

一款将px单位转换为视口单位的 (vw, vh, vmin, vmax) 的 [PostCSS](https://github.com/postcss/postcss插件

!!!注意:这里只能将css外联的转换,内联css和行内的要自己处理,@keyframe也需要自己处理

https://github.com/evrone/postcss-px-to-viewport/blob/master/README_CN.md

npm i postcss-px-to-viewport -D
//创建postcss.config.js

module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-px-to-viewport': {
      unitToConvert: 'px', //要转换的单位,默认,不改
      viewportWidth: 750,  // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
      viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
      unitPrecision: 3,    // 指定`px`转换为视窗单位值的小数位数
      viewportUnit: "vw",   /指定需要转换成的视窗单位，建议使用vw
      selectorBlackList: ['.ignore-'],// 指定不转换为视窗单位的类，可以自定义，可以无限添加
      minPixelValue: 1,   // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      mediaQuery: false   // 媒体查询中单位是否要转换
      replace: true,  // 是否直接更改属性值,默认true
  	  exclude: [], //忽略某些文件夹下的文件或特定文件 正则或数组正则 eg. /node_module/
  	  landscape: false, //横屏时媒体查询,默认false
  	  landscapeUnit: 'vw',//横屏时使用单位,默认vw
  	  landscapeWidth: 568 //横屏时视口宽度,默认568
    }
  }
}  

响应式页面兼容移动端

1.媒体查询

引入资源,根据媒体查询,调用不同的css资源(了解)

<link ref="320.css" media="screen and (min-width: 320px)" />
<link ref="640.css" media="screen and (min-width: 640px)" />

2.bootstarp3

开发原理

1.响应式:
超小屏幕（手机，小于 768px）：设置宽度为 100%
小屏幕（平板，大于等于 768px）：设置宽度为 750px
中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px
大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px 
此外css的类库可以借鉴,方便提高代码速度

使用

创建文件夹结构 比传统多了一个bootstrap文件夹
创建html骨架结构
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
引入样式
<!-- Bootstrap 核心样式-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

bootstrap布局容器 .container .container-fluid流式布局容器

bootstrap栅格系统

12等分
	
	.row可以去除父容器15px的padding
	列＞12，多余的列所在的元素将被作为一个整体另起一行排列
	
栅格嵌套  可以通过添加一个新的 .row 元素和一系列 .col-* 元素到已经存在的 .col-* (xm sm md lg)
列偏移  .col-md-offset-4 类可以将列向右侧偏移4等分
列排序  col-lg-push-8向右偏移8等分 col-lg-pull-4向左偏移4等分
响应式工具 .hidden-xs/sm/md/lg 隐藏   .visiable-* 显示

扩展:可利用媒体查询,手动修改container宽度适应设计稿

 /* 利用媒体查询修改 container宽度适合效果图宽度  */
@media (min-width: 1280px) { 
 .container { 
	width: 1280px; 
  } 
}

bootstrap中文网:https://www.bootcss.com/