HTML管理不同的分辨率

时间：2015-02-19 00:38:45

标签： html css

我在1366 * 768分辨率的PC上构建了一个网页。我使用百分比和px来调整距离等。但是在竞争之后，当我将其运行到1920 * 1080分辨率时，一切都只是乱七八糟。 那么，如何管理CSS使其在任何具有任何分辨率的PC上都可以无失真地运行。 

<html>
<head>
    <title>About US..</title>
    <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
    <script type="text/javascript" src="js/about.js"></script>
    <link rel="shortcut icon" href="img/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="css/about.css">
</head>

<body>
<div class="main">
    <div class="header">
        <div class="header1">

        </div>

        <div class="left">

        </div>
        <a href="index.html"><div class="left1">

        </div></a>
        <div class="left2">
        In a Nut Shell..
        </div>
        <a href="about.html" id="left1a"><div class="left3">
            About Us
        </div></a>
        <a href="contact.html" id="left1b"><div class="left4">
            Contact Us
        </div></a>  
    </div>
    <div class="content">
        Meet developers Of "In a Nut Shell.."<br>

        <div class="geetika">
            <div id="top">
                <div id="circle">
                </div>
            </div>
            <div id="bottom"><br>
                <font color="black">Geetika</font><br>
                <p>I am currently Pursuing My Btech From KIIT University. Have a lot Of interest in Website Designing and other Stuff<p>
                <br><br><br>
                <a href="#" id="geetika1">Click to know more</a>
            </div>
        </div>

        <div class="nikhil">
            <div id="top">
                <div id="circle">
                </div>
            </div>
            <div id="bottom"><br>
                <font color="black">Nikhil Srivastava</font><br>
                <p>I am currently Pursuing My Btech From KIIT University. Have a lot Of interest in Website Designing and other Stuff<p>
                <br><br><br>
                <a href="#" id="nik1" >Wanna Know More ;)</a>
            </div>
        </div>

        <div class="sumegha">
                <div id="top">
                    <div id="circle">
                    </div>
                </div>
                <div id="bottom"><br>
                    <font color="black">Sumegha Mukherjee</font><br>
                    <p>I am currently Pursuing My Btech From KIIT University. Have a lot Of interest in Website Designing and other Stuff<p>
                    <br><br><br>
                    <a href="#" id="sumegha1">Click to know more</a>
                </div>
        </div>

        <div class="nikdetail">
            Nikhil Srivastava
            <div id="banner">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mollis iaculis lectus vitae finibus. Sed ac turpis at eros semper interdum et et sem. Pellentesque convallis dictum ligula, et luctus dolor tristique vel. Fusce non augue in risus venenatis fermentum quis eu purus. Ut dictum tincidunt est, eu commodo orci hendrerit ultrices. Phasellus fermentum metus a purus finibus, et sagittis lacus placerat. Integer rutrum, sapien et efficitur fringilla, metus elit scelerisque turpis, et iaculis massa lacus ut odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque vehicula pretium ligula vitae mollis. Vestibulum sed sem ex. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris rutrum turpis eget pulvinar vulputate. Vestibulum consectetur vulputate egestas. Sed dictum, augue in volutpat aliquam, ante nisi eleifend massa, non tempus dui leo eu odio.


                </p>
                <br><br><br>
                <a href="#" id="nik2">Go Back</a>
            </div>
        </div>

        <div class="geetdetail">
                Geetika 
                <div id="banner">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mollis iaculis lectus vitae finibus. Sed ac turpis at eros semper interdum et et sem. Pellentesque convallis dictum ligula, et luctus dolor tristique vel. Fusce non augue in risus venenatis fermentum quis eu purus. Ut dictum tincidunt est, eu commodo orci hendrerit ultrices. Phasellus fermentum metus a purus finibus, et sagittis lacus placerat. Integer rutrum, sapien et efficitur fringilla, metus elit scelerisque turpis, et iaculis massa lacus ut odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque vehicula pretium ligula vitae mollis. Vestibulum sed sem ex. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris rutrum turpis eget pulvinar vulputate. Vestibulum consectetur vulputate egestas. Sed dictum, augue in volutpat aliquam, ante nisi eleifend massa, non tempus dui leo eu odio.
                </p>
                <br><br><br>
                <a href="#" id="geetika2">Go Back</a>
            </div>
        </div>



        <div class="sumeghadetail">
                Sumegha Mukherjee
                <div id="banner">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mollis iaculis lectus vitae finibus. Sed ac turpis at eros semper interdum et et sem. Pellentesque convallis dictum ligula, et luctus dolor tristique vel. Fusce non augue in risus venenatis fermentum quis eu purus. Ut dictum tincidunt est, eu commodo orci hendrerit ultrices. Phasellus fermentum metus a purus finibus, et sagittis lacus placerat. Integer rutrum, sapien et efficitur fringilla, metus elit scelerisque turpis, et iaculis massa lacus ut odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque vehicula pretium ligula vitae mollis. Vestibulum sed sem ex. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris rutrum turpis eget pulvinar vulputate. Vestibulum consectetur vulputate egestas. Sed dictum, augue in volutpat aliquam, ante nisi eleifend massa, non tempus dui leo eu odio.
                </p>
                <br><br><br>
                <a href="#" id="sumegha2">Go Back</a>
            </div>
        </div>





    </div>
</div>





</body>
</html>

和CSS：

body{
    background: #BDBDBD;    
}

.main{
    width: 100%;
    height: 100%;

}

.header {
    width:100%;
    height:5%;
    z-index: 10;
    float: left;  
}


.header1 {
    z-index: 10;
    position: fixed;
    width: 100%;
    background-image: url("../img/w3.jpg"); 
    -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  -o-filter: blur(1px);
  -ms-filter: blur(1px);
  filter: blur(1px);
  float: left;
  height: inherit;
  margin-top: -8px;
  margin-left:-8px; 
}

.left{
    float:left; 
    z-index: 9999;  
    font-size: 30px;
    font-family: cursive;
    color: white;   
    height: 40px;
    width: 30%;
}


.left1{
    position: fixed;
    float:left; 
    z-index: 9999;  
    font-size: 30px;
    font-family: cursive;
    color: white;   
    height: 40px;
    background-image: url("../img/favicon.ico");
    background-repeat: no-repeat;
    background-size: 45px 34px;
    width: 40px;
    margin-left: 10%;
    margin-top: -5px;
}

.left2{
    position: fixed;
    float:left;     
    z-index: 11;
    z-index: 9999;  
    font-size: 35px;
    font-family: buxton sketch;
    color: white;   
        margin-left: 15%;
margin-top: -5px;
}

.left3{
    position: fixed;
    float:left; 
    z-index: 9999;  
    font-size: 20px;
    font-family: cursive;
    color: white;   
    float: left;
    margin-left: 70%;
    width: 100px;
    padding-left: 5px;
}

.left4{

    position: fixed;
    float:left;     
    z-index: 11;    
    font-size: 20px;
    font-family: cursive;
    color: white;
    margin-left: 80%;
    width: 110px;
    padding-left: 5px;
    }

.content{
  background: -webkit-linear-gradient(#BDBDBD, #FBEFFB); 
  background: -o-linear-gradient(#99390D, #D25318); 
  background: -moz-linear-gradient(#99390D, #D25318);
  background: linear-gradient(#BDBDBD, #FBEFFB); 
  width: auto;
  height: inherit;
  margin-right: -8px;
  margin-left: -8px;
  padding-bottom: 8px;
font-size: 35px;
text-align: center;
font-family: buxton sketch;
color: black;

}

.nikhil{
    float: left;
    width:250px;
    height: 500px;
    margin-top: 25px;
    margin-left: 50px;
    background-color:rgba(0,0,0,0.1);
    box-shadow:5px 5px 5px 1px black;
}

.geetika{
width:250px;
float: left;
height: 500px;
    margin-top: 25px;
    margin-left: 18%;
    background-color:rgba(0,0,0,0.1);
    box-shadow:5px 5px 5px 1px black;
}

.sumegha{
width:250px;
height: 500px;
float: left;
    margin-top: 25px;
    margin-left: 50px;
    background-color:rgba(0,0,0,0.1);
    box-shadow:5px 5px 5px 1px black;
}

.nikhil #top{
width: 100%;
height: 100px;
background-color:#0000FF;

}

.nikhil #bottom{
width: 100%;
height: 400px;
font-size: 20px;
text-align: center;
font-family: cursive;
color: #4B4B4E;
}
.nikhil #bottom a{
color: black;
text-decoration: none;

}

.nikhil #top #circle{
     width: 100px;
    height: 100px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px; 
    margin-left: 75px;  
    background-image: url("../img/nik1.JPG");
background-size: 100px 100px;
background-repeat: no-repeat;

}

.sumegha #bottom a{
color: black;
text-decoration: none;

}

.sumegha #top{
width: 100%;
height: 100px;
background-color:#0000FF;
}

.sumegha #bottom{
width: 100%;
height: 400px;
font-size: 20px;
text-align: center;
font-family: cursive;
color: #4B4B4E;
}

.sumegha #top #circle{
     width: 100px;
    height: 100px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px; 
    margin-left: 75px;  
    background-image: url("../img/sumegha.jpg");
background-size: 100px 100px;
background-repeat: no-repeat;

}

.geetika #top{
width: 100%;
height: 100px;

background-color:#0000FF;
}

.geetika #bottom{
width: 100%;
height: 400px;
font-size: 20px;
text-align: center;
font-family: cursive;
color: #4B4B4E;
}

.geetika #top #circle{
     width: 100px;
    height: 100px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px; 
    margin-left: 75px;  
    background-image: url("../img/geetika.jpg");
background-size: 100px 100px;
background-repeat: repeat;

}
.geetika #bottom a{
color: black;
text-decoration: none;
}


.nikdetail{
border: 1px solid black;
margin-left: 5%;
width: 90%;
height: 500px;
background-color: black;
font-family: ALGERIAN;
color: white;
display:none;
}


.nikdetail #banner{
    font-family:Lucida Handwriting;

font-size: 18px;
}

.nikdetail #banner a{
    font-family:Lucida Handwriting;
    text-decoration: none;
    color: white;
}

.geetdetail{
border: 1px solid black;
margin-left: 5%;
width: 90%;
height: 500px;
background-color: black;
font-family: ALGERIAN;
color: white;
display:none;
}


.geetdetail #banner{
    font-family:Lucida Handwriting;

font-size: 18px;
}

.geetdetail #banner a{
    font-family:Lucida Handwriting;
    text-decoration: none;
    color: white;
}

.sumeghadetail{
border: 1px solid black;
margin-left: 5%;
width: 90%;
height: 500px;
background-color: black;
font-family: ALGERIAN;
color: white;
display:none;
}


.sumeghadetail #banner{
    font-family:Lucida Handwriting;

font-size: 18px;
}

.sumeghadetail #banner a{
    font-family:Lucida Handwriting;
    text-decoration: none;
    color: white;
}

1 个答案:

答案 0 :(得分：0)

使用CSS媒体查询，您可以定位屏幕分辨率。

@media (max-width: 767px) {
  /*mobile screen styles*/
}

@media (min-width: 768px) and (max-width: 991px) {
  /*tablet screen styles*/
}

@media (min-width: 992px) and (max-width: 1199px) {
  /*small desktop screen styles*/
}

@media (min-width: 1200px) {
  /*large desktop screen styles*/
}

我强烈建议将Bootstrap视为前端框架。它已经内置了响应式设计等等。

相关问题
最新问题