移动端布局注意事项

手机端开发须知简介
            1.设备独立像素
            就是屏幕的大小，也可以说是屏幕的尺寸（别名叫点，属于一个单位）
            获取方法：window.screen.width/window.screen.height
            注意：
                1.横竖屏切换的时候，真机里的这个值不会改变，但是在模拟器里面是会改变的
                2.一个点里，可以放多个像素（也就是px）
                3.设备独立像素的值是可以被改变的(对于开发者来说)
            2.设备像素
            也称作物理像素，是屏幕的分辨率（实际放的像素值，1px就是1px），买手机的时候厂商告诉你的分辨率
            这个值是虚拟的，无法获取
            3.像素比（dpr，这个值无法修改）
            缩放的比例=设备像素（分辨率）/设备独立像素
            获取：window.devicePixelRatio
            解释：如果说一个设备的dpr是2的话，也就是说在1个点里放2个像素的意思
            也就是说，375的设备，可以放750px的元素
            4.viewport
            width=device-width宽度是设备的宽度
            user-scalable 用户能否缩放  yes/no
            initial-scale 初始比例，程序员来设置，设置为2的话各个元素就显示为原来的两倍（不要轻易玩这个）
                            但是加上 这个以后不是把每个元素都缩放了，而是改变了设备的独立像素
            minimum-scale 最小能够缩放的比例
            minimum-scale 最大能够缩放的比例

几种适配布局的好坏
            1.百分比布局
            值不好计算
            需要确定父级元素的大小，因为素有元素都是根据父级大小进行计算的
            宽度可以设置，但是高度不好设置
            一般情况下百分比布局都是配合其他布局一起使用的
            2.比例缩放适配（把所有机型的设备独立像素都设置成一致的）
            viewport需要通过js动态的设置
            通过设置比例，把宽度缩放成一致的
            注意：viewport里面给了缩放的值以后，最终页面的宽度是拿原来的值除以缩放比例
            3.比例适配01（根据dpr的值，把视口进行缩放，缩放到物理像素，也就是把屏幕的尺寸直接设置成他的物理像素）
            也是动态的设置viewport
            缺点：有些dpr不是整数，会出现除不尽的情况，那缩放的倍数就会出现很长的小数，再去算物理像素的时候就有误差
            4.rem适配
            px  绝对单位，无论屏幕多大，给多少就是多少，做不到适配
            em  相对单位，相对于自身字体大小的值，比如font-size：12px,则1em=12px
                问题：chrome下有最小字体限制，必须为12px，所以这个最小只能是12px
                    如果两个一样的元素，但是里面字体不一样，那就不能统一设置了，或者字体更改的时候也要重新设置
            rem 相对单位，css3新增，相对于根节点（html）字体大小来设置
                比如html{font-size：10px} 则1rem=10px
                通过rem可以做到只修改根元素的大小，就能成比例的调整所有字体的大小

精华
            首先rem的换算使用less进行动态的计算，设置好比例就不用自己计算了
            less文件写好后右键编译成css文件引入就可以了
            其次
            进入hbuilder找到 工具-选项-Hbuilder-编译器-代码助手设置 勾选启动px转rem提示，设置好两个比例，确定
            最后
            写代码的时候只要写了less文件的变量以后，直接写px就可以了，会有自动的代码提示转换成rem

兼容问题汇总（要用真机测试才能测出，chrome模拟器测不出）
            1.body下的overflow：hidden问题
            body加了overflow：hidden后，如果子元素比body大的话，正产是会被减掉不显示的，但是在ios上仍然显示
            也就是说，body的overflow：hidden在ios上面没有起到作用
            2.固定定位问题
            固定定位在移动端的兼容性很不好，以前老版本的安卓不支持，ios4以前的版本也不支持
            比如你fixd定位了header，qq浏览器下有时候向下滑动的话，，header就会隐藏掉
            再比如当你打开键盘的时候，固定定位也会失去作用
            3.点击链接的时候默认有一个背景,通过a标签去测试
            通过-webkit-tab-highlight-color:rgba(0,0,0,0)取消这个默认的背景
            4.按钮在ios下面都是圆角，通过input和buton去测试
            通过-webkit-appearance:none;消除输入框和按钮的默认外观
            border-radius：0；消除圆角
            5.每台设备的默认字体是不一样的（移动端设备大都没有宋体和微软雅黑），如果不设置字体则会选择手机默认的字体
            选择使用font-family:helvetica字体（大多数手机都有）
            6.切换横竖屏或者用户自己通过更改浏览器的设置，可以改变字体的大小
            加上-webkit-text-size-adjust:100%;禁止用户更改字体大小（需要加给body下的所有元素）
            7.长按文字ios下会选中文字
            通过添加-webkit-user-select:none;使长按文字也不能选中    
            8.手机中的浏览器内核大多是webkit内核