css标签resolution,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:
Lorem ipsum nasov je?
"Lorem ipsum dolor sit amet, consectetur adipisicing elit."
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;}
}
總結
以上是生活随笔為你收集整理的css标签resolution,html/css to fit all screen resolution的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 计算机应用技术中的c语言,C语言程序设计
- 下一篇： 综述： 通信雷达一体化中的信号处理