如何设置我的网站以适应越来越小的屏幕尺寸？

我想知道是否有人可以帮助解决问题，我试图让我的网站适合多种屏幕尺寸？我一直在做一些研究和尝试不同的方法（如“adjust-your-website-to-fit-all-resolutions”和“html-css-to-fit-all-screen-resolution”），并且一直尝试使用不同的CSS代码和Javascript代码，但没有成功。我甚至在我的主css文件中尝试了不同的响应网站代码，如<meta name="viewport" content="width=device-width">和@media screen and (min-width: 700px)，它们都不起作用。我只是不知道为什么它不起作用。如何设置我的网站以适应越来越小的屏幕尺寸？

我想知道的另一件事是，它可能是我现有的HTML和CSS代码。你看到我的不同图像，标题，内容等，我一直在使用position:absolute;，我想知道是否影响我适合所有屏幕尺寸。另外我想知道这可能会导致我的问题，就是我在当时基于计算机屏幕设计我的网站的方式。当我第一次设计网站时，我使用的电脑是1366 x 768（分辨率屏幕尺寸），当我第一次注意到我的网站存在问题时，我使用的电脑为1600 x 900（分辨率屏幕尺寸）。想知道如果position:absolute;可能会伤害我的网站能够适应不同的屏幕尺寸。

任何人都可以建议或推荐任何使用CSS，HTML和/或Javascript的方式来使我的网站适应更大或不同的尺寸？

预先感谢您！

P.S. - 这里是一些从我的网站的代码示例：

代码@media屏幕（最小宽度：1600像素）//电脑尺寸从我的CSS文件1600 X900：

#wel { 
    position:absolute; 
    top: 108px; 
    left: 278px; 
} 
@media screen and (min-width: 700px) { 
    #wel { 
     position:absolute; 
     top: 108px; 
     left: 250px; 
    } 
} 
@media screen and (min-width: 1600px) { 
    #wel { 
     position:absolute; 
     top: 108px; 
     left: 400px; 
    } 
}

代码，我把我的HTML使响应代码工作：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

任何人有任何建议吗？

来源

2017-04-17 Mike

我强烈建议您使用自举等响应式框架。它肯定会帮助您生成漂亮的响应式网页。如果您使用引导程序，您不需要担心媒体查询 – lhavCoder

您可以复制您迄今在jsfiddle中的内容吗？ –

由于您已经为同一个div id（#wel）定义了两个不同的最小宽度媒体查询，因此它无法正常工作，请根据您的要求尝试更新&。

#wel { 
    position:absolute; 
    top: 108px; 
    left: 278px; 
} 
@media screen and (min-width: 700px) { 
    #wel { 
     position:absolute; 
     top: 108px; 
     left: 250px; 
    } 
} 
@media screen and (min-width:701px) and (max-width: 1600px) { 
    #wel { 
     position:absolute; 
     top: 108px; 
     left: 400px; 
    } 
}

在这里的例子中，直到宽度700像素它将调用被定义为第一媒体查询（最小宽度：700像素）和from701-1600它将调用被定义为从701-媒体查询1600。

来源

2017-04-18 11:05:38

是的，那工作！我使用最大化，并摆脱“和”，然后它的工作。谢谢你指出我的代码中有很多“min”。 – Mike

我不知道你的布局是怎么样的，我只是说，的确，你可以使用@media screen和meta viewport，并尝试使用相对大小和位置。

来源

2017-04-17 21:00:41 JulianSoto

谢谢JulianSoto的回答。您可以帮助验证@media屏幕和元视口的工作原理。 – Mike

如何设置我的网站以适应越来越小的屏幕尺寸？

回答

相关问题