HTML / CSS来适应所有的屏幕分辨率 [英] html/css to fit all screen resolution
问题描述
我在网站上工作，我试图让它响应所有解决方案，但没有成功..
这里是HTML：
<身体GT;
< 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>
这里是css：
body
{
width：1920px;
背景颜色：＃f8e0b3;
height：1080px;
}
div.container
{
width：100％;
身高：100％;
}
div.header
{
background：url（img / header.jpg）;
宽度：100％;
身高：46％;
margin-top :;
margin-left :;
border-bottom：2px纯黑色;
}
h1.naslov
{
font-size：60px;
颜色：白色;
margin：0 auto;
保证金余额：28％;
font-family：Aramis;
}
p.naslov-text
{
font-size：40px;
颜色：＃634ea9;
margin：0 auto;
width：1000px;
margin-top：0％;
保证金余额：36％;
font-family：Aramis;
}
当我调整浏览器网站的大小时不会调整大小。我一直在尝试整个上午，我真的很倦怠。有谁知道什么逻辑来处理，以适应所有屏幕，但只使用CSS。
CSS：
＃gallery-1 img {
width：375px;
}
@media screen and（min-width：1366px）{
＃gallery-1 img {width：375px;}
}
@media screen and（最小宽度：1440px）{
＃gallery-1 img {width：428px;}
}
@media屏幕和（最小宽度：1600px）{
＃gallery- 1 img {width：434px;}
}
@media screen and（min-width：1920px）{
＃gallery-1 img {width：540px;}
}
参考： Stack Over Flow
JQUERY
使用jquery调整窗口大小。这是一个用于所有浏览器窗口大小调整的动态代码。
使用jquery的示例代码：
$ b $
$（document）.ready（function（）{
$（window）.resize（）;
}） ;
$（window）.resize（function {
// your code
var windowWidth = $（window）.width（）;
var mainContainerWidth = windowWidth-100; //例如
$（＃yourMainContainer）。css（{width：mainContainerWidth +px}）;
}）;
就像你会尝试你的主类宽度和高度一样。
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.
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.
这篇关于HTML / CSS来适应所有的屏幕分辨率的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
