zoukankan      html  css  js  c++  java
  • 移动web开发流式布局

    二倍图

    ####3.1物理像素&物理像素比

    物理像素点指的是屏幕显示的最小颗粒,是物理真实存在的。这是厂商在出厂时就设置好了,比如苹果6 是 750* 1334

    我们开发时候的1px 不是一定等于1个物理像素的

    一个px的能显示的物理像素点的个数,称为物理像素比或屏幕像素比

    如果把1张100*100的图片放到手机里面会按照物理像素比给我们缩放

    lRetina(视网膜屏幕)是一种显示技术,可以将把更多的物理像素点压缩至一块屏幕里,从而达到更高的分辨率,并提高屏幕显示的细腻程度。

    对于一张 50px * 50px 的图片,在手机或 Retina 屏中打开,按照刚才的物理像素比会放大倍数,这样会造成图片模糊

    在标准的viewport设置中,使用倍图来提高图片质量,解决在高清设备中的模糊问题

    通常使用二倍图, 因为iPhone 6 的影响背景图片 注意缩放问题

    背景缩放background-size

    background-size 属性规定背景图像的尺寸

    background-size: 背景图片宽度 背景图片高度;

    单位: 长度|百分比|cover|contain;

    cover把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。

    contain把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域

    移动端大量使用 CSS3盒子模型box-sizin

    传统模式宽度计算:盒子的宽度 = CSS中设置的width + border + padding

    CSS3盒子模型: 盒子的宽度= CSS中设置的宽度width 里面包含了 border 和 padding

    也就是说,我们的CSS3中的盒子模型, padding 和 border 不会撑大盒子了

    /*CSS3盒子模型*/
    box-sizing: border-box;
    /*传统盒子模型*/
    box-sizing: content-box;
    ​

    移动端可以全部用CSS3 盒子模型

    PC端如果完全需要兼容,我们就用传统模式,如果不考虑兼容性,我们就选择 CSS3 盒子模型

     

    移动端特殊样式

     /*CSS3盒子模型*/
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        /*点击高亮我们需要清除清除  设置为transparent 完成透明*/
        -webkit-tap-highlight-color: transparent;
        /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
        -webkit-appearance: none;
        /*禁用长按页面时的弹出菜单*/
        img,a { -webkit-touch-callout: none; }
    

      

  • 相关阅读:
    Linux编译安装中configure、make和make install各自的作用
    转载的 Linux下chkconfig命令详解
    MYSQL主从不同步延迟原理分析及解决方案(摘自http://www.jb51.net/article/41545.htm)
    mysql主从延迟(摘自http://www.linuxidc.com/Linux/2012-02/53995.htm)
    http://ninghao.net/video/1554不错的学习网址
    javascript 内置对象和方法
    javascript 函数
    javascript 基础
    css z-index
    css 透明度
  • 原文地址:https://www.cnblogs.com/showlgfcode/p/13604732.html
Copyright © 2011-2022 走看看