Question

我使用媒体屏幕使内容在达到特定宽度时变得更小，我的问题是我希望内容随浏览器浮动，我的意思是内容变得更平滑但不会突然变小而达到指定的宽度

例如，

http://onepagelove.com/world-cup-match-balls

当浏览器变小时，内容会变得平滑，但不会突然。这是什么编码？

body {
margin: 0;
padding: 0;
font-family: KaiTi, "Arial Unicode MS";
font-size: 100%;
color: #000;
height:100%
}

html {
height:100%;
padding:0;
margin:0;
}

.mainwrapper {
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: 100% 100%, auto;
-o-background-size: 100% 100%, auto;
background-size: 100% 100%, auto;
height: 100%;
}

.container {
width: 936px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}

@media screen and (max-width: 1024px) {

.container {
width: 800px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left:auto;
}

#logo {
margin-left:280px
}

.content {
width:500px;
padding-left:110px;
padding-bottom:380px;
}

.footer {
margin-left: 62px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFF;
padding-top: 10px;
padding-bottom: 10px;
}

#myFrame {
height: 200px;
width: 436px;
padding: 0;
}

}

Answer 1

您正在使用媒体查询的正确路径，而不是像素（px）宽度使用内容的百分比（％）宽度。您还可以查看最小宽度和最大宽度。

Answer 2

如果以％表示.container的宽度，则不需要额外的javascript来处理转换。只需确保指定最小宽度，这样您的内容就不会变得太窄。

.container {
width: 90%;
min-width: 650px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}

如何在浏览器变小时使内容变小

2 个答案: