兼容性与移动端知识小结



一、兼容性
    1、IE6中双倍margin，触发条件：margin-left和浮动。
       解决方法：display：inline；
    2、IE6中默认最小高度10px。
       解决方法：overflow：hidden；设置line-height
    3、margin-top重叠，解决方法：设置边框，或overflow：hidden；
    4、图片间距：img{float：left}，用注释（！--）可解决。
    5、min-height，内容大于高度，自动撑开。
       解决方法：height：200px；overflow：visible；IE6中
                height：auto ！important；其它浏览器
    6、lte 表示小于等于，gte表示大于等于，lt表示小于，ge表示大于。
    7、narigator.userAgent 版本信息。
二、移 动端
    1、页面布局分为：百分比布局，响应式布局，rem布局。
    2、rem表示相对于根元素的字体大小。
    3、viewport表示可视化窗口，在移动端大多是980，而在pc端和屏幕大小一样。
    4、width=device-width，宽度等于屏幕宽度。
    5、initial-scale=1 不缩放
    6、像素有：物理像素和独立像素。独立像素是在css中设定的大小。
    7、dpr=物理/独立。
    8、@media screen and （min-width：997px；）{}；宽度大于997px。
    9、@media screen and （min-width：768px；） and （max-width：996px）{}；宽度大于768小于996.
    10、@media screen and （max-width：768px；）{}；宽度小于768px。