css标签resolution,html/css to fit all screen resolution

港控/mmm° 2022-09-02 14:54 138阅读 0赞

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 Unable to resolve module 'react-native-screen'

相关如何退出 detached 的 screen 会话？| how to kill a detached screen session?

相关 css object-fit 属性

相关 CSS标签

相关 Auto Publish To All

相关 css标签resolution,html/css to fit all screen resolution

相关装箱问题 BPP first fit、best fit、first fit decreasing、best fit decreasing

相关 shrink-to-fit(自适应宽度)

相关 Sentence Screen Fitting

相关 CSS object-fit属性