移动端知识

移动端布局

1、移动端基础

1、手机浏览器都是根据Webkit修改过来的内核，国内还没有自主研发的内核，处理webkit内核浏览器就可以了
2、移动端设备尺寸非常多，碎片化严重。有各种各样的分辨率
3、视口：就是浏览器显示页面内容的屏幕区域，视口可以分为布局视口、视觉视口和理想视口
4、理想视口：对设备来讲就是最理想的视口，通过设置meta标签，让布局视口的宽度与理想视口的宽度一致，就是移动设备多宽，布局视口就有多宽。
5、物理像素指的是分辨率
6、在PC端网页中，1px等于1个物理像素，但是移动端是不一样的，
7、在移动端中，物理像素点指的是屏幕显示的最小颗粒，iphone8的物理像素点是750*1334.一个px的能显示的物理像素点的个数，称为物理像素比或者屏幕像素比
8、倍图的出现：因为像素比被放大，图片出现模糊，所以出现两倍图。
9、网址域名前面+m可以打开移动端，通过设备判断，可以跳到移动端页面
  比如：m.taobao.com、  m.jd.com
10、移动端主流方案：
    10.1：单独制作移动端页面，京东、淘宝
    10.2：响应式页面：www.samsung.com,三星官网，通过判断屏幕宽度来改变样式，适应不同           终端
11、移动端技术解决：因为移动端浏览器基本以webkit内核为主，一些h5标签和css样式加上                      webkit前缀就可以
12、盒子模型：box-sizing。css设置的宽度包含有了border和padding，不会再去单独计算
13、传统盒子和css3的盒子的不同（考虑兼容性问题）：
    content-box：传统盒子
    加上 box-sizing: border-box;
    可以让普通盒子变成css3盒子
    宽高：padding和border不会撑大盒子
14、移动端布局：
    流式布局（百分比布局）：给盒子设置百分比
    flex弹性布局
    less+rem+媒体查询布局（rem）
    混合布局
15、max-width：最大宽度，
     min-width：最小宽度
16、flex布局：
     1、布局原理：弹性布局，任何容器都可以指定为弹性布局
     2、注意：
         1）当父盒子设置为flex布局以后，子元素的float、clear和vertical-align属              性将失效
            2）伸缩布局=弹性布局=flex布局
     3、采用了flex布局的元素叫做flex容器，所有子元素成为容器成员，称为项目
     4、子元素可以横向排列也可以纵向排列
    

电脑： 1920*1080px  1px  分辨率
移动端是不一样的：物理像素点  1px和像素点成比例关系。  这种就叫做物理像素比

假如说我们有过一个图片50*50
就放在50*50的div里面
像素比，所以图片就会模糊，
所以就要准备两倍图就会变得清晰
盒子和图片要成一种比例关系：1:2
100*100盒子放照片

flex是把盒子变成弹性盒子：子元素就可以完成弹性布局，子元素就会按照主轴副轴来进行排列

2、流式布局

1、流式布局就是百分比布局也称为固定像素布局
2、通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充
3、流式布局是移动web开发使用的比较常见的布局方式
4、设置最大值和最小值：max-width,min-width

2、flex布局

1、传统布局和flex布局的区别
     传统布局：兼容性好、布局繁琐、局限性很高
     flex布局：PC端浏览器支持情况较差，操作方便，个别浏览器兼容性较差
2、flex布局原理：弹性布局，任何容器都可以指定为flex布局
3、当父盒子设置为flex布局以后，子元素的float、clear和vertical-align属              性将失效
4、伸缩布局=弹性布局=flex布局
5、采用了flex布局的容器成为flex容器。子元素陈伟flex项目，简称”项目"
6、总结：通过给子盒子添加flex属性，来控制子盒子的位置和排列方式
7、容器 container 的属性  
    1. flex-direction   主轴方向
    2. flex-wrap        主轴一行满了换行
    3. flex-flow        1和2的组合
    4. justify-content  主轴元素对齐方式
    5. align-items      交叉轴元素对齐方式//单行
    6. align-content    交叉轴行对齐方式//多行
8、flex-direction 主轴方向
     row（默认值）：主轴为水平方向，起点在左端。
     row-reverse：主轴为水平方向，起点在右端。
     column：主轴为垂直方向，起点在上沿。
     column-reverse：主轴为垂直方向，起点在下沿。
9、flex-wrap 主轴一行满了换行
   nowrap (默认值) 不换行压缩宽度
   wrap    换行
   wrap-reverses 反向换行
10、justify-content 主轴元素对齐方式
   flex-start (默认)靠着main-start对齐//参考常见术语(一般是左方向)
   flex-end   靠着main-end对齐//参考常见术语(一般是右方向)
   center     靠着主轴居中对齐//一般就是居中对齐
   space-between 两端对齐，靠着容器壁，剩余空间平分
   space-around  分散对齐，不靠着容器壁，剩余空间在每个项目二侧平均分配
   space-evenly  平均对齐，不靠着容器壁，剩余空间平分
11、align-items item「项目」在交叉轴上对齐方式「单轴」
    flex-start：交叉轴的起点对齐。
    flex-end：交叉轴的终点对齐。
    center：交叉轴的中点对齐。
    baseline: 项目的第一行文字的基线对齐。
    stretch（默认值）伸展：如果项目未设置高度或设为auto，将占满整个容器的高度。
12、align-content 交叉轴行对齐方式 多行
   flex-start (每一行)(默认)靠着cross-start对齐//参考常见术语(一般是左方向)
   flex-end   （每一行)靠着cross-end对齐//参考常见术语(一般是右方向)
   center     (每一行)靠着cross线居中对齐//一般就是居中对齐
   space-between (每一行)两端对齐，靠着容器上下壁，剩余空间平分
   space-around  (每一行)分散对齐，不靠着容器壁，剩余空间在每个项目二侧平均分配
   strentch      (每一行)伸缩，占满整个高度
13、项目元素 item 的属性
   flex-grow：长大
   flex-shrinik: 缩小
   align-self: 覆盖container align-items 属性
   order 排序
   flex-basis: 有效宽度
14、主轴与侧轴：在flex布局中，分为主轴和侧轴两个方向，也叫作行和列。
              默认主轴方向是x轴方向，水平向右
              默认侧轴就是y轴方向，水平向下
15、align-content和align-items区别：
    一个适用单行，只有上对齐，下对齐、居中、拉伸
    一个实验多行，上面都可以，还可以分配剩余空间
16、 子项布局  
      1、flex:子项目占的份数
      2、align-self：控制子项自己在侧轴的排列方式
      3、order定义子项的排列顺序

3、rem布局

1、rem单位，类似于em，em是父元素字体大小
2、不同的是rem是针对html根元素的字体大小
3、rem即root  em，即是根元素的字体大小的倍数

4、媒体查询

1、媒体查询是css3新语法
2、使用@media查询，可以针对不同的媒体类型定义不同的样式
3、@media可以针对不同的屏幕尺寸设置不同的样式
4、当重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面

5、媒体查询语法规范

1、用@media开头，注意@符号
2、mediatype媒体类型：将不同的终端设备划分成不同的类型，称为媒体类型
    all：用于媒体设备
    print：用于打印机和打印预览
    screen：用于电脑屏幕，平板电脑、智能手机
3、关键字：将媒体类型或多个媒体特性连接到一起作为媒体查询的条件
      and：将多个媒体特性连接到一起，相当于”且”的意思
      not：排出某个类型，相当于”非”的意思  
      only：指定某个特定的媒体类型，可以省略
4、media  feature媒体特性，必须有小括号包含，根据不同类型的媒体特性设置不同的展示风格
      width：定义输出设备中页面可见区域的宽度
      min-width：定义输出设备中页面最小可见区域宽度
      max-width：定义输出设备中页面最大可见区域宽度

6、媒体查询引入资源

1、当样式比较多的时候，我们可以针对不同的媒体使用不同的样式表，就只在link中判断设备的尺    寸，然后引用不同的css文件

7、小知识

1、网页如果加上了<meta name="viewport" content="width=device-width">
  手机会认为自己的视口宽度是320px~460px之间
2、网页如果不加 手机会认为自己视口多宽980
3、.box {
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 1px solid red;
}

8、选择器的权重计算

1、有很多种选择器，类名、标签名、id名
2、层叠类样式表：一个标签可以被多个选择器添加样式
3、数权重，用圆括号表示（），里面的三个数分别代表id的数量、类名的数量、标签的个数
4、交集选择器拆开数权重
5、先看谁最近，然后比谁权重大，就选谁，如果权重相同，谁写在下面以谁为主

9、继承性

1、color
2、font开头
3、tet开头