移动端基础

浏览器现状：

主要考虑webkit内核浏览器，因为国内大多数移动端都是webkit内核。

一、视口（viewport）

1、 定义：

        浏览器显示页面内容的屏幕区域。分为布局视口、视觉视口和理想视口

2、 布局视口（layout viewport）

         大多在手机上呈现，只不过看上去元素很小

3、视觉视口（visual viewport）

          用户正在看到的网站的区域，可以通过缩放去操作视觉视口，不影响布局视口，视口仍保持原来的宽度

4、理想视口（ideal viewport）

        最理想的视口尺寸
        需要手动添写meta视口标签通知浏览器操作

5、meta视口标签

        meta视口标签的主要目的：布局视口和理想视口的宽度一致
        <meta name="viewport" conten="widtn=device-width, user-scalable=no,
initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
            width  宽度设置的是viewport宽度，可以设置device-width（设备宽度）特殊值
            intial-scale 初始缩放比，大于0的数字
            maximum-scale 最大缩放比，大于0的数字
            minimum-scale 最小缩放比，大于0的数字
            user-scalable 用户是否可以缩放，yes或no（1或0）

二、二倍图

1、物理像素和物理像素比

        物理像素就是分辨率
        物理像素比是指： 1px 开发像素 = 几个物理像素 

2、retina（视网膜屏幕）

可以把更多的物理像素点压缩到一块屏幕里，从而达到更高的分辨率。提高屏幕显示的细腻程度

 我们准备的图片 比我们实际需要的大小 大2倍 这就是 2 倍图，因为我们需要一个50*50(css像素)的图片 直接放到我们的手机浏览器可能会放大2倍或者几倍

3、背景缩放 background-size

格式：background-size：图片的宽度 图片的高度；
单位：长度、百分比、cover、contain
            cover：完全覆盖背景区域，宽高等比例拉伸
            contain：宽高等比例拉伸，当宽度或高度铺满div盒子就不进行拉伸，可能会有部分空白

4、背景渐变

background：linear-gradient（起始方向，颜色1，颜色2）；线性渐变

注：背景渐变必须添加浏览器私有前缀

三、移动端技术解决方案

1、css3盒子模型

box-sizing： border-box；

2、点击高亮我们需要清除

        设置为transparent 完成透明
        -webikt-tap-highlight-color：transparent；

3、在移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式

         -webkit-appearance：none；

4、禁用长按页面时的弹出菜单

          img，a { -webikt-touch-callout：noen；}

5、二倍精灵图

           先将精灵图缩小为原来的一半，再进行移动（background-position）

           然后再用background-sizing：宽 高。将图片缩小

6、图片格式

        DPG图片压缩技术：京东自主研法推出DPG压缩技术
        webp图片格式：谷歌开发，旨在加快图片加载速度的图片格式

四、移动端常见布局

常见的有：单独制作移动端页面和响应式页面，主流是单独制作

1、流式布局（百分比布局、非固定像素布局）

    将盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充
    流式布局是移动web开发比较常见的布局方式

通过设置最大最小值防止布局挤乱
        max-width 最大宽度（max-height 最大高度）
        min-width 最小宽度 （min-height 最小高度）

2、flex布局

a、布局原理

为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局
    （就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式）

注：当为父盒子设为flex布局后，子元素的float、clear和vertical-align属性将失效

b、采用flex布局的元素，称为flex容器（flex container），简称容器。

c、它的所有元素自动成为容器成员，称为flex项目（flex item），简称项目
    子项目可以横向排列也可以纵向排列

3、flex布局父项常见属性

a、主轴和侧轴
        默认主轴方向就是x轴方向，水平向右
        默认侧轴方向就是y轴方向，水平向下
        注：主轴和侧轴是会变化的，flex-direction设置谁为主轴，剩下的就是侧轴

b、flex-direction：设置主轴的方向
        属性： row 默认值 从左到右  
        row-reverse 从右到左  
        column从上到下 
        column-reverse从下到上

c、justify-content：设置主轴上的子元素排列方式
        注：使用这个属性之前要确定好主轴是哪个
        flex-start 默认值，从头部开始 如果主轴是x轴，则从左到右
        flex-end 从尾部开始排列 
        center 在主轴居中对齐（如果主轴是x轴则水平居中）
        space-around 平分剩余空间
        space-between 先两边贴边 再平分剩余空间

d、flex-wrap：设置子元素是否换行
        默认是不换行，不够排列时会缩小子元素的宽度
        nowrap 不换行 wrap换行

e、align-content:设置侧轴上的子元素的排列方式（多行，单行下没有作用）
        flex-start 默认值再侧轴的头部开始排列
        flex-end 在侧轴的尾部开始排列
        center 在侧轴中间显示
        space-around 子项在侧轴平分剩余空间
        space-between 子项在侧轴先分布在两头，再平分剩余空间
        stretch 设置子项元素高度平分父元素高度

f、align-items：设置侧轴上的子元素排列方式（单行）
        flex-start 默认值 从上到下  
        flex-end 从下到上  
        center 挤在一起居中（垂直居中） 
        stretch 拉伸（拉伸时子元素不能有高度）

g、flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap

4、flex布局子项常见属性

flex属性
        flex属性定义子项目分配剩余空间，用flex来表示占多少份数
        格式： .item { flex:数字；}也可以写百分号

align-self控制子项自己在侧轴上的排列方式

order属性定义项目的排列顺序（越小越靠前）