移动端适配-01-百分比宽度

1:图片可以在parent中使用
    1:line-heigh和text-align使水平和竖直居中
    2:在img标签中加vertical-align: middle;
2:<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0 ,
        maximum-scale=1, minimum-scale=1"> 
3:background-size
    1:两个参数:background-size:500px 200px;
    2:只写一个参数:设置宽度,高度会等比例拉伸;
    3:可以写百分比:50%为parent的一般:
    4:cover:完全填充盒子,可能有部分背景图片显示不全;
      contain:宽高等比例拉伸,宽或者高铺满,则不再拉伸,可能有部分空白区域;
4:css3盒子模型:box-sizing:border-box;
  传统盒子模型:box-sizing:content-box;

5:兼容
    1:点击高亮(超链接)显示:
        *{
            -webkit-tap-highlight-color:transparent;
        }
    2:给按钮和输入框添加样式:
    inout,buttom{
        -webkit-appearance: none;
    }
    3:禁止长安页面弹出菜单:
        img,a{
            -webkit-touch-callout: none;
        }
6:移动端常见布局:
    1:单独制作移动端页面:
        1:流式布局
            1:定义:百分百布局,也成为非固定像素布局;
            2:通过盒子的宽度设置成百分比来根据屏幕的宽度进行伸缩,不受固定像素限制,内容向两侧填充;
            3:流式布局为为移动端较为常见的布局方式;
            4:通常设定
                1:max-width:
                2:min-width:
            5:盒子宽度设置为100%;
        2:flex弹性布局(强烈推荐)
        3:rem+less+媒体查询布局
        4:混合布局
    2:响应式兼容移动端:
        1:媒体查询;
        2:bootstarp;

7:二倍雪碧图处理:firework
8:图片格式:
    1:dpg图片压缩技术:
        京东自主研发dpg格式,直接节省用户50%的浏览时间;
    2:webp图片格式:
        google开发的,加快图片加载速度;只要原来的2/3;

移动端web开发:
    1:移动端基础
    2:视口
    3:二倍图
    4:移动端调试
    5:移动端技术解决方案
    6:移动端常见布局
    7:移动端开发流式布局
    8:jd首页制作

    1:移动端开发流式布局:
        1:浏览器现状:
            1:pc浏览器:
                360,firfox,google,safiry,ie,sougou
            2:手机浏览器:(对兼容性支持比较好)
                uc,qq,欧朋,百度,360
            3:移动端支持只需要考虑webkit内核就可以了;
        2:移动端调试方式:
            1:chrome devtools(google)模拟手机调试;
            2:搭建本地web服务器,手机和服务器在同一个局域网中,通过手机访问服务器;
            3:使用外网访问;

    2:移动端基础        
        1:移动端浏览器主要针对webkit内核进行兼容
        2:移动端主要针对手机端开发
        3:使用chrome浏览器模拟手机界面进行调试

    3:视口(viewport):布局视口,视觉视口,理想视口
        1:理想视口:
            1:为了网站最理想的浏览和阅读宽度而设定;
            2:对设备来讲,是最理想的视口尺寸;
            3:需要手动添加meta视口标签通知浏览器操作;
            4:meta视口标签的主要目的:使布局视口的宽度与理想视口的宽度一致;
            5:标签属性:
                1:width:设置viewport的宽度;
                2:initial-scale:初始化缩放比,>0 ;
                3:maximum-scale:最大缩放比,>0;
                4:minimum-scale:最小缩放比,>0;
                5:user-scalable:用户是否可缩放;(yes或者no/1或0)
                6:
                    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0 ,
        maximum-scale=1, minimum-scale=1"> 
        2:布局视口:layout viewport,通过压缩版面,会导致字体很小
        3:视觉视口:visual viewport,通过压缩版面,会导致字体很小
    4:二倍图:
        1:在pc中1px=1物理像素,在iphone中1px=2物理像素;
        2:物理像素和屏幕像素比(1.0/2.0/3.0)
    5:多倍图:使用倍图的方式解决像素被稀释的问题;
    6:背景图片的缩放:(css3)background-size:背景图像的尺寸;(图片的宽度和高度)
        1:使用方式:
            1:两个参数:background-size:500px 200px;
            2:只写一个参数:设置宽度,高度会等比例拉伸;
            3:可以写百分比:50%为parent的一般:
            4:cover:完全填充盒子,可能有部分背景图片显示不全;
              contain:宽高等比例拉伸,宽或者高铺满,则不再拉伸,可能有部分空白区域;
    7:背景图片二倍图:
        使用background-size:对二倍图进行缩放;

    8:移动端开发选择:
        1:单独制作移动端页面(主流)
            1:京东,淘宝,苏宁
            2:网址前面加m,可以打开移动端,通过判断设备,如果是移动端打开,则跳转到移动端界面;
        2:响应式页面兼容移动端;
            一套界面:通过响应不同的宽度,进而显示不同的界面;
            缺点:兼容性问题; 
    9:移动端技术解决方案;
        1:移动端浏览器:只需考虑webkit内核即可,
            可以尽情使用h5和css3
        2:css初始化:
            normalize.css;
            移动端css推荐使用normalize.css
            优点:    
                1:保护有价值的默认值;
                2:修复了浏览器bug
                3:模块化
                4:拥有详细文档;

                body {
                    margin:0;
                }
        3:css3盒子模型:box-sizing;
            1:传统盒子模型:盒子的宽度:width+border+padding;
                box-sizing:content-box;传统盒模型
            2:css3盒子模型:盒子宽度:width(里面包含了border和padding)
                box-sizing:border-box;css3盒子模型;
        4:特殊样式:
            1:点击高亮(超链接)显示:
                -webket-tap-highlight-color:transparent;
            2:给按钮和输入框添加样式:
                -webkit-appearance: none;
            3:禁止长安页面弹出菜单:
                img,a{
                    -webkit-touch-callout: none;
                }
            4:c3盒子模型:
                box-sizing:border-box;

    10:移动端常见布局:
        1:单独制作移动端页面:
            1:流式布局
                1:定义:百分百布局,也成为非固定像素布局;
                2:通过盒子的宽度设置成百分比来根据屏幕的宽度进行伸缩,不受固定像素限制,内容向两侧填充;
                3:流式布局为为移动端较为常见的布局方式;
                4:通常设定
                    1:max-width:
                    2:min-width:
                5:盒子宽度设置为100%;
            2:flex弹性布局(强烈推荐)
            3:rem+less+媒体查询布局
            4:混合布局
        2:响应式兼容移动端:
            1:媒体查询;
            2:bootstarp;