问题描述
我在网站上工作,我试图让它响应所有解决方案,但没有成功..
这里是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;}
}
参考:
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来适应所有的屏幕分辨率的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!