html/css 以适应所有屏幕分辨率
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22911043/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
html/css to fit all screen resolution
提问by user3477366
I'm working on the website and I'm trying to make it responsive to all resolutions but without success.. Here is HTML:
我在网站上工作，我试图让它响应所有分辨率，但没有成功..这是 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:
这是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.
当我调整浏览器网站的大小时，它不会调整大小。我整个上午都在努力，但我真的筋疲力尽。有谁知道采用什么逻辑使其适合所有屏幕，但仅使用 css。
回答by JEYASHRI R
CSS:
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.
使用 jquery 调整窗口大小。这是用于所有浏览器窗口大小调整的动态代码。
Example code here using jquery:
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.
像那样，您将尝试使用主类的宽度和高度。
回答by Cem ?zer
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.
当您为 body 和 p.naslov-text 设置固定宽度时，您的网站将不会调整大小。删除所有 px 大小并用百分比值替换它们。
But if you want fixed sizes and also responsive you must use css media queries like that:
但是如果你想要固定大小并且响应，你必须使用像这样的 css 媒体查询：
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;
}
}
回答by KesaVan
Hope this helps..
希望这可以帮助..
CSS
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..
还尝试使用媒体查询来获得您想要的任何分辨率。
回答by Mostafa
hello you should use @media screen in your css and you should use % instead px.
你好，你应该在你的 css 中使用 @media screen，你应该使用 % 代替 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;}
}
回答by G.L.P
Remove width (in "px") from body and also from p.naslov-text. Try to give width:100%; to get responsive layout Fiddle
从正文和 p.naslov-text 中删除宽度（以“px”为单位）。尝试给出宽度：100%；获得响应式布局小提琴
CSS:
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;
}
回答by Johansrk
You have a fixed width on your body
你的身体有固定的宽度
