html - 如何在浏览器变小的同时让内容变小

Question

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

例如， 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

如果以 % 为单位给出 .container 的宽度，则不需要额外的 javascript 来处理转换。只需确保指定一个最小宽度，这样您的内容就不会变得太窄。

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