Question

我的网站特定部分有以下css：

.menu{
    top:7%;
    height: 100%;
    left:10%;
    bottom:10%;
    width: 18%;
    height: 47%;
    z-index:1;
    position:absolute;
}    
.menu .star{
    background: url("button.png") 0% 0%/ 80% 80% no-repeat;
    border: none;
    width:5em;
    height:5em;
    padding-left:3%;
    margin-left: 30%;       
    transition-duration:0.3s;   
    -moz-transition: 0.3s;
    -ms-transition: background 0.3s;
    -webkit-transition: background 0.3s;
    -ms-transform: rotate(7deg); 
    -webkit-transform: rotate(7deg); 
    transform: rotate(7deg);
}

#buttonlist{ /*this is the name of the ul containing namelist,contained in .menu
    margin-top: -90%;
    margin-left: -20%
}
.namelist{
    text-transform: uppercase;
    position:relative;
    margin-left:15%;
    margin-bottom:16%;
    font-size: 110%;
    font-weight:bold;
    font-family: helvetica;
    color:#66e0ff;
    background-color: Transparent;
    border:none;
    outline:none;
}

根据我搜索的内容，大多数解决方案都是“使用百分比”，但我的css是百分比，所以我不知道问题是什么。
我在不同的浏览器中测试网站时存在错位。该网站的背景也正在被裁剪。对于背景，我没有使用封面或背景大小：100％100％因为我不希望在用户更改窗口大小时调整背景。
总结一下我的问题：如何根据屏幕分辨率调整对齐方式，如何将背景大小调整为最大窗口大小，并在用户重新调整窗口大小时不调整？

Answer 1

如果您不想在用户调整大小时缩小背景大小，请将min-width属性添加到背景中。
您可以使用CSS media queries根据屏幕分辨率更改您的CSS。即使您使用了百分比，您仍然可以根据屏幕大小覆盖特定规则。
要确保在用户调整大小时后台img不会更改，请将后台min-width property设置为您希望用户查看的大小。（它还有一个max-width属性）

此链接将为您提供标准设备的正确尺寸。希望这可以帮助。 https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Answer 2

给图像固定宽度和高度以避免调整，并且为了调整对齐，您可以使用百分比，如您所述，您也可以使用width of the view port vw使元素根据窗口宽度获取宽度

如何根据屏幕分辨率调整网站

2 个答案: