移动端布局

移动端开发基础

移动端调试方法
搭建本地web服务器，手机和服务器一个局域网，通过手机访问服务器
使用外网服务器，直接ip或域名访问
移动端浏览器我们主要对webkit内核进行兼容

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

布局视口
默认设置，pc上网页可以在手机上呈现，但是会缩小元素，默认手动缩放网页

视觉视口
用户正在看到网站的区域，通过缩放去操作视觉视口，但不影响布局

理想视口（推荐）
为了使网站有理想的浏览和阅读宽度而设定的，简单理解布局的视口等于设备的宽度

width: 宽度设置的是viewport，可以设置device-width特殊值
initial-scale: 初始缩放比，大于0的数字
maximum-scale: 最大缩放比，大于0的数字
minimum-scale：最小缩放比，大于0的数字
user-scalable：用户是否可以缩放
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

物理像素&物理像素比
物理像素指屏幕显示的最小颗粒
一个px能显示的物理像素点的个数，称为物理像素比或者屏幕像素比

特殊样式

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

移动端技术选型
单独制作移动端页面（主流）
流式布局（百分比布局）
flex 弹性布局（强烈推荐）
less+rem+媒体查询布局
混合布局
响应式页面兼容移动端
媒体查询
bootstrap
国内的手机浏览器都是根据webkit修改过来，国内尚无自主研发的内核，就像手机操作系统都是基于Android修改开发一样的

移动端技术解决方案
浏览器以webkit内核为主，私有前缀添加-webkit-
css初始化normalize.css。优点：保护了有价值的默认值，修复了浏览器bug，模块化和拥有详细的文档

流式布局也称百分比布局
百分比布局，通过将盒子设置成百分比，根据屏幕宽度来进行伸缩，不受固定像素限制
移动web开发中比较常见的布局方式
设置视口标签以及引入初始化样式

<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum=1.0,minimum=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">

常用初始化样式

body {
  margin: 0 auto;
  min-width: 320px;
  max-width: 540px;
  background: #fff;
  font-size: 14px;
  font-family: -apple-system, Helvetica, sans-serif;
  line-height: 1.5;
  color: #666;
}

css渐变效果

background-image: linear-gradient(0deg,#f1503b,#c82519 50%);

图片格式DPG
京东自主研发的图片压缩技术，提高用户打开网页速度，能够兼容jpeg，并且清晰度没有差距
响应式布局容器
需要一个父级做为布局容器，实现变化效果
在不同屏幕下，通过媒体查询改变布局容器大小，改变页面布局和样式变化

.box{
    height: 100px;
    margin: 0 auto;
  }
  /* 超小屏幕 */
  @media screen and (max-width: 767px){
    .box{
      width: 100%;
      background-color: blue;
    }
  }
  /* 小屏幕 */
  @media screen and (min-width: 768px){
    .box{
      width: 750px;
      background-color: blueviolet;
    }
  }
  /* 中等屏幕 */
  @media screen and (min-width: 992px){
    .box{
      width: 970px;
      background-color:chartreuse;
    }
  }
  /* 小屏幕 */
  @media screen and (min-width: 1200px){
    .box{
      width: 1170px;
      background-color:crimson;
    }
  }

移动端规范布局
先引入理想视口和css样式表
引入规范css样式表normalize.css

<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum=1.0,minimum=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">

格式化css样式

/* 初始化样式 */
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;
    -webkit-tap-highlight-color: transparent;
}
ul,li {
  list-style: none;
  padding: 0;
  margin: 0;
}
a {
  color: #222;
  text-decoration: none;
}
h1,h2,h3,h4,h5,h5 {
  margin: 0;
  padding: 0;
}
/*点击高亮我们需要清除清除 设置为transparent 完成透明*/
*{
  -webkit-tap-highlight-color: transparent;
}
/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
input{
  -webkit-appearance: none;
}
/*禁用长按页面时的弹出菜单*/
img,a { -webkit-touch-callout: none; }

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

flex布局父项常见属性
flex-direction 设置主轴方向
主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，而子元素就是跟主轴排列的

justify-content 主轴上元素排列方式
定义了主轴上对齐方式，但是要先确定主轴

flex-wrap 设置子元素是否换行
flex布局中默认不换行的

align-items 侧轴上子元素排列方式（单行）
控制子项在侧轴上排列方式，在子项为单行的时候使用

align-content 侧轴上子元素排列方式(多行)
设置子项在侧轴上排列方式，只能用于子项换行的情况，在单行下是没有效果的

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

flex 布局子项常见属性
flex子项目占的份数
align-self控制子项自己在侧轴的排列方式
order属性定义子项的排列顺序

flex属性
flex属性定义子项目分配父盒子的剩余空间，用flex来表示占有多少份
属性值为数字，数字为1，表示占总份数中的1份，默认为0

align-self 控制子项自己在侧轴上的排列方式
align-self属性允许单个项目有不同的对齐方式，可覆盖align-items
默认值为auto，表示继承父元素的align-items属性，如果没有父元素等同于stretch

order排序
数值越小，排列越靠前

rem布局
rem是一个相对单位，类似em,em是父元素字体大小
不同的是rem基准是相对于html元素字体大小
父元素文字大小可能不一致，但是整个页面只有一个可以很好的控制整个页面的元素大小比例

媒体查询
使用@media查询，可以争对不同媒体类型定义不同样式

@media会根据不同高度和宽度重新渲染页面
  @media mediatype and|not|onle (media feature) {
 CSS-Code 
}

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

关键字
and:将多个媒体连接到一起，相当于且的意思
not:排除某个媒体类型，相当于非的意思
or:可以测试多个媒体查询条件，只有一个成立就执行
only：指定某个特点的媒体类型

媒体查询+rem实现元素动态大小变化
rem 单位是跟着html走的可以根据不同设备宽度来修改样式
媒体查询+rem 就可以实现不同设备宽度，实现页面元素大小的动态变化

<link rel="stylesheet" href="styleA.css" media="screen and (min-width: 400px)">

Less
Less是一门css预处理语言，拓展了css的动态特性

Less安装
用node.js安装Less
cmd命令"npm install -g -less"安装，检查安装成功lessc -v

Less编译
我们需要把less文件编译成css文件，这样我们html才能使用
推荐方法node.js: 在当前文件夹，使用cmd命令"lessc style.less > style.css"
利用vscode less插件，easy LESS插件用来把less文件编译成css文件

简介高效的rem适配方案flexible.js
github地址：https://github.com/amfe/lib-flexible
在index.html中引入flexible.js这个文件
vscode px 转换rem插件 :cssrem