html/css to fit all screen resolution

问题

I'm working on the website and I'm trying to make it responsive to all resolutions but without success.. Here is HTML:

<body>
    <div class = "container">
        <div class = "header">
        <h1 class = " naslov "> Lorem ipsum nasov je? </h1>
        <p class = "naslov-text">
    "Lorem ipsum dolor sit amet, consectetur adipisicing elit." 
        </p>
        </div>
    </div>
 </body>

And here is css:

body
{
    width:1920px;
    background-color: #f8e0b3;
    height:1080px;
}
div.container
{
width:100%;
height:100%;
}
div.header
{
background:url(img/header.jpg);
width:100%;
height:46%;
    margin-top:;
    margin-left:;
    border-bottom: 2px solid black;
}
h1.naslov
{
    font-size:60px;
    color:white;
    margin:0 auto;
    margin-left:28%;
    font-family: Aramis;
}
p.naslov-text
{
font-size:40px;
color:#634ea9;
margin:0 auto;
width:1000px;
margin-top:0%;
margin-left:36%;
font-family: Aramis;
}

When I resize my browser website doesn't resize. I've been trying all morning and I'm really burnout. Do anyone know what logic to approach to make this fit all screens , but only using css.

回答1:

As you are giving a fixed width to your body and p.naslov-text, your website will not resize. Remove all px sizing and replace them with percentage values.

But if you want fixed sizes and also responsive you must use css media queries like that:

body
{
    width:1920px;
    background-color: #f8e0b3;
    height:1080px;
}

@media screen and (min-width: 500px) {
   body {
      width:420px;
   }
}

@media screen and (min-width: 800px) {
   body {
      width:720px;
   }
}

回答2:

CSS:

#gallery-1 img {
   width:375px;
}
@media screen and (min-width: 1366px) {
#gallery-1 img {width:375px;}
}
@media screen and (min-width: 1440px) {
#gallery-1 img {width:428px;}
}
@media screen and (min-width: 1600px) {
#gallery-1 img {width:434px;}
}
@media screen and (min-width: 1920px) {
#gallery-1 img {width:540px;}
}

Reference: Stack Over Flow

JQUERY:

Use jquery for resize window. This one is dynamic code for window resizing for all browsers.

Example code here using jquery:

$(document).ready(function(){
    $(window).resize();
});
$(window).resize(function{
    // your code
    var windowWidth=$(window).width();
    var mainContainerWidth=windowWidth-100; // For example
    $("#yourMainContainer").css({"width":mainContainerWidth+"px"});
});

like that you will try for your main class width and height.

回答3:

You have a fixed width on your body

回答4:

Remove width (in "px") from body and also from p.naslov-text. Try to give width:100%; to get responsive layout Fiddle

CSS:

body {
    background-color: #f8e0b3;
    height:1080px;
    width:100%;
}

p.naslov-text {
    font-size:40px;
    color:#634ea9;
    margin:0 auto;
    margin-top:0%;
    margin-left:36%;
    font-family: Aramis;
}

回答5:

Hope this helps..

FIDDLE

CSS

body
{
    width:100%;
    background-color: #f8e0b3;
    height:100%;
}
div.container
{
width:100%;
height:100%;
}
div.header
{
background:url(img/header.jpg);
width:100%;
height:100%;
    margin: 2% 2% 2% 2%;
    border-bottom: 2px solid black;
}
h1.naslov
{
    font-size:60px;
    color:white;
    margin:0 auto;
    float:none;   
    font-family: Aramis;
}
p.naslov-text
{
font-size:40px;
color:#634ea9;
margin:0 auto;
margin-top:0%;
float:left;
font-family: Aramis;
}

Also try to use media Query for whatever resolution you want..

回答6:

hello you should use @media screen in your css and you should use % instead px.

@media screen and (min-width: 1366px) {
#gallery-1 img {width:375px;}
}
@media screen and (min-width: 1440px) {
#gallery-1 img {width:428px;}
}
@media screen and (min-width: 1600px) {
#gallery-1 img {width:434px;}
}
@media screen and (min-width: 1920px) {
#gallery-1 img {width:540px;}
}

来源：https://stackoverflow.com/questions/22911043/html-css-to-fit-all-screen-resolution

标签

html

css

resolution