zoukankan      html  css  js  c++  java
  • CSS响应式布局实例

    <style type="text/css">
            body{
                margin:0 auto;
                min-1366px;
            }
            a{
                text-decoration:none;
                color:black;
            }
            a:hover{
                color:orange;
            }
            a:visited{
                color:black;
            }
            #main{
                 background-image:url(img/bg.jpg);
                 background-position:contain;
                 background-size:100%100%;
                 height:826px;
            }

            @media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */
                #main{
                     background-image:url(img/bg1.jpg);
                     height:1080px;
                }
                #iptDown{
                    position:relative;
                    left:180px;
                    top:950px;
                    50%;
                }
            }
    @media only screen and (max-device-width :480px){
        #main{
                 background-image:url(img/bg1.jpg);
                 height:1880px;
            }
            #iptDown{
                    position:relative;
                    left:180px;
                    top:950px;
                    50%;
                }
        }

    /*6*/
    @media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
        #main{
                background-image:url(img/bg1.jpg);
                 height:1880px;
            }
            #iptDown{
                    position:relative;
                    left:180px;
                    top:950px;
                    50%;
                }
        }

    /*6+*/
    @media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){
        #main{
                 background-image:url(img/bg1.jpg);
                 height:1880px;
            }
            #iptDown{
                    position:relative;
                    left:180px;
                    top:950px;
                    50%;
                }
        }

    /*魅族*/
    @media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 2.5){
        #main{
                 background-image:url(img/bg1.jpg);
                 height:1880px;
            }
            #iptDown{
                    position:relative;
                    left:180px;
                    top:950px;
                    50%;
                }
        }

    /*mate7*/
    @media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 3){
        #main{
                 background-image:url(img/bg1.jpg);
                 height:1880px;
            }
            #iptDown{
                    position:relative;
                    left:180px;
                    top:950px;
                    50%;
                }
        }

    /*4 4s*/
    @media only screen and (device-height :480px) and (-webkit-device-pixel-ratio:2){
        #main{
                 background-image:url(img/bg1.jpg);
                 height:1880px;
            }
            #iptDown{
                    position:relative;
                    left:180px;
                    top:950px;
                    50%;
                }
        }
            #topnav{
                float:right;
                margin-right:146px;
                margin-top:10px;
            }
            li{
                display:inline;
                border-right:1px solid #736e6e;
                margin-left:8px;
                font-size:22px;
            }
        </style>

    联系我:renhanlinbsl@163.com

    2016-7-25

    14:05

  • 相关阅读:
    【原】独立小应用程序性能优化简化版,减少数据库访问次数,提高应用程序处理效率,缓存之 HttpRuntime.Cache
    【转】SQL索引一步到位
    C# Excel读取导入数据库碰到的问题
    VS2010SP1修复补丁&Microsoft Visual Studio 2010 Service Pack 1
    ImportError: No module named ‘MySQLdb'
    【转】(C#)OPC客户端源码
    【转】DCOM远程调用权限设置
    【转】OPC远程访问相关配置信息
    WPF之DataAnnotations 注解说明
    WPF中,输入完密码回车提交 ,回车触发按钮点击事件
  • 原文地址:https://www.cnblogs.com/ives/p/5703274.html
Copyright © 2011-2022 走看看