zoukankan      html  css  js  c++  java
  • 响应式网站设计

    关于media的各种写法:css2中和css3中

    http://www.360doc.com/content/14/0704/06/10734150_391862769.shtml

    使用media queries的网站锦集

    http://mediaqueri.es/

    慕课网

    viewport 表示可视区域,通常情况下,苹果手机如果viewport中content不设置内容的话,我们的980px会缩小一倍,然后看上去正常。

    但是如果320的宽度的话,也会缩小一倍,比如图所示就很难看了。

    如果说这里的content设置成设备的宽度,并且缩放的倍数设置成1(1表示不缩放),就可以了。

    ==============================

    ==============================

    =============================

    dpi: dots per inch

    aspect-ratio 可视窗口宽高比。也支持最小和最大的宽高比。

    device-aspect-ratio  设备的宽高比(包含浏览器信息等。)

    Orientation

    横向(landscape)和 竖向(portrait)

    @media (orientation :landscape){
       body{
           backgound:#27ae60;
       }
    }


    @media (max-height:480px)
    @media (max-device-height:480px)

    @media screen and( max-resolution: 150dpi){}

    @media screen and(-webkit-device-pixel-ratio:1){
    }

    @media screen and( resolution:1 dppx){
    }

    @media screen and (min-480px ) and (max- 767px){}

    @media not screen and( max-resolution: 150dpi){} //先计算后边的条件,然后计算not。

    响应式布局—设备像素密度测试

    http://www.gbtags.com/gb/share/5307.htm

    http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/

    当大尺寸的时候,写死高宽,当小尺寸的时候,%比定宽度。

    当小于767的时候,100%;先去除浮动。

    =================================

    =================================

    =================================

    :hover换成:targer伪类。

    ==============

    img 和background的区别

    img 如果100%;高度自适应的话,按图形的比例显示;

    如果用background的话:

    background: url(../../images/01.jpg) 50% 50% no-repeat;
    -webkit-background-size:100%;
    background-size:cover;

    cover确保他的宽度和高度按比例填充满图像的父元素。


    #showcase{
    background: url(../../images/0.1jpg) 50% 50% no-repeat;
    -webkit-background-size:100%;
    background-size:cover;
    }
    下面的这种写法就可以覆盖。
    #showcase{
    background: url(../../images/01.jpg);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    -webkit-background-size:100%;
    background-size:cover;
    }
    @media (max-480px){
    #showcase{
    background: url(../../images/01s.jpg);
    }
    }

    @media (max-480px) and (min-resolution:2dppx),(max-480px) and (-webkit-min-device-pixel-ratio:2){}

    前面的一个判断像素密度的方法,因为谷歌的老版本可能识别不了, 所以用后边的。

    ===========================================

    ===========================================

    ===========================================

    三个span分别用于不同的屏幕

    第一个用于,大屏pc的浏览器。

    第二个用于,小屏的pc的浏览器。

    第三个用于,d

  • 相关阅读:
    Linux下gdb attach的使用(调试已在运行的进程)
    Linux ps 命令
    SemaphoreFullException when checking user role via ASP.NET membership
    c程序内存分布
    正则表达式
    事务实战感悟
    oracle免客户端安装 plsql连接
    关于tomcat的热部署
    json工具包比较 fastjson jackson gson
    图片 滚动 放大缩小 旋转
  • 原文地址:https://www.cnblogs.com/coding4/p/5544732.html
Copyright © 2011-2022 走看看