CSS响应式布局实例

<style type="text/css">
        body{
            margin:0 auto;
            min-width: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;
                width: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;
                width: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;
                width: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;
                width: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;
                width: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;
                width: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;
                width: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>

联系我:[email protected]

2016-7-25

14:05

时间： 2025-02-01 12:56:36

CSS响应式布局实例的相关文章

css3 flex流动自适应响应式布局实例 转

转自:http://www.tuicool.com/articles/auEbMzU   感谢他的分享, 一.图片自适应居中 实例图: 实例HTML: <div class="demo"> <img src="http://dummyimage.com/100x100" alt=""> </div> <div class="demo"> <img class="&

css响应式布局RWD

响应式布局结合了三大理念: 1)用于布局的弹性网络(百分比定义宽度) 2)用于图片和视频的弹性媒体 3)媒体查询 在布局中,需要注意的点有: 1)尽量用min-width/max-width,max-height/min-height代替width,height 2)尽量使用百分比,em为单位代替精确值 3)采用媒体查询 二.媒体查询 IE8以下不支持媒体查询,需要引入 <!-- if lte IE 8> <script src="response.min.js"&g

css响应式布局用法

1.使用内联样式的用法 在<head>标签中使用style,使用@media指定对应屏幕分辨率大小的样式 <head lang="en"> <meta charset="UTF-8"> <title>响应式布局示例</title> <style> @media screen and (min-width: 800px) { body { background-color: red; } } @m

响应式布局实例操作

js *{ margin: 0px; padding: 0px; } .heading, .container, .footing{ margin: 10px auto; } .heading{ height: 100px; background-color: chocolate; } .left, .right, .main{ background-color: cornflowerblue; } .footing{ height: 100px; background-color: aquam

css响应式布局 兼容ie6

1.两栏布局  左侧定宽   右侧自适应 <div class="grid1">     <div class="left_1">左侧定宽</div>     <div class="right_1">右侧自适应</div> </div> .left_1{float:left; width:200px;} .right_1{margin-left:200px;} 2.两栏布局

学习制作一个简易博客,知识应用: html css 响应式布局

css响应式布局

以设计稿为准,假设设计稿竖屏宽度为750px,取根元素的font-size为50px 在iphone6(375px)下,deviceWidth=7.5rem, 这个就是viewPort中的deviceWidth, 所以fontsize计算公式为 font-size=deviceWidth/7.5 即50px,因此我们可以设置iphone6下 html的font-size为312.5% 在该尺寸下的设备上,如果要设置某个p元素的字体大小为18px,可以设置成0.36rem 在iphone5s 32

css3 flex流动自适应响应式布局实例

http://qianduanblog.com/post/css-learning-18-css3-flex-responsive-design-example.html

css响应式布局原理

移动设备优先: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 媒体标签: @media screen and (min-width: 100px){ div{ width: 100px; height: 1000px; background: yellow; } } 完整代码: <!DOC