css 如何为不同的屏幕尺寸设置自动宽度？

9ceoxa92 于 2024-01-09 发布在其他

关注(0)|答案(3)|浏览(99)

我的网站使用此代码为width，它是完美的显示在15.6英寸的屏幕上，但对于移动的屏幕和上网本&平板电脑屏幕的10英寸，该网站是完全混乱.它使用一个固定的宽度，我试图使它auto，100px但没有成功.这里是css代码：

#container {
    width: 1180px;
    margin: 5px auto;
    text-align: left;
    background-color:#FFF;
}

字符串
网站是HERE有一个背景图像和容器被放置在它。如何修改此代码有自动宽度为不同的屏幕？
PS：脚本是opencart。

3条答案

尝试在CSS中使用百分比而不是固定宽度。

#container 
{
width: 95%; 
margin: 5px auto;
text-align: left;
background-color:#FFF;
}

字符串
如果你想根据设备的不同使用不同的CSS，最好的办法是使用@Ruddy建议的Media Queries

试试下面的css..（对于所有的宽度适用于最大值：100%）

#container {
width: 1180px;
max-width: 100%;
margin: 5px auto;
text-align: left;
background-color:#FFF;
}

字符串

**->**尝试在CSS中使用百分比或最小宽度和最大宽度，而不是固定宽度。
--百分比--

#container {
  width: 95%;
  margin: 5px auto;
  text-align: left;
  background-color: #fff;
}

字符串

min-width和max-width

#container {
  width: 100%;
  max-width: 1180px;
  min-width: 380px;
  margin: 5px auto;
  text-align: left;
  background-color: #fff;
}

型

尝试使用这两种方法，如果这两种方法都不起作用，则使用媒体查询。

赞(0）回复(0）举报 2024-01-09