调整浏览器大小时,页面内容(按钮、图像等)会关闭
Content of page (buttons, images, etc.) goes off when browser is resized
我在更改浏览器大小时遇到了问题,因为内容开始走样。我做了一些研究,并尝试使用#wrapper,但我无法解决。调整浏览器大小时,如何缩放页面内容?
http://philome.la/gapp06gt/c3gua9/play
body {
background-color: #DCDCDC;
background-size:98%;
background-repeat: repeat-y;
background-position:center;
}
#wrapper {
width: 100%;
max-width: 100%;
display: block;
height: 100%;
max-height: 100%;
}
tw-link {
width: 40%;
padding: 1.5em;
margin: auto;
border: ridge #191970 0.4em;
border-radius: 0.2em;
font-family: Verdana;
font-size: 0.75rem;
color: #000;
text-align: center;
background-color: #fff;
}
tw-passage {
width: 100%;
padding: 2em;
margin: auto;
border: solid #000 0.05em;
border-radius: 0.2em;
font-family: Lucida Console;
;font-size: 1.5rem;
color: #000;
text-align: left;
background-color: #fff;
box-shadow: #000 0.2em 0.2em 0;
*{margin: 0;
padding: 0;
}}
tw-icon {
opacity: 1;
color: red;
}
tw-sidebar {
color:;
border:;
padding-bottom: 0.8em;
border-radius: 25%;
background-image:;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
随着视口变得越来越窄,您可以使用CSS媒体查询来逐渐加宽容器并减少其填充。这个想法是将布局调整为最适合每个屏幕大小的布局,所以简单地缩小整个布局并不一定理想。
@media all and (max-width: 1000px) {
tw-story { width: 70%; }
tw-passage { padding 5%; }
}
@media all and (max-width: 850px) {
tw-story { width: 80%; }
}
@media all and (max-width: 750px) {
tw-story { width: 90%; }
}
/* etc. */
您还可以使img
元素响应,如下所示:
img {
width: 100%;
height: auto;
}
如果你不想使用媒体查询来逐渐改变文本的大小,那么你可以尝试FitText-jQuery插件。我建议只在标题文本中使用这个,而不是较小的正文。作者甚至对此发出警告:"你不敢让我们发现你在段落文本上使用FitText。这只适用于巨大的显示文本!"
您可能需要查看仓位属性
所以我仔细看了一下你的代码,一点也不明白。在tw-align
上有max-width:50%
。有什么原因吗?如果没有,则在所有tw-align
上将其更改为max-width:100%
。
在700px分辨率上,您应该将tw-passage
的填充减少到1em
或其他内容,并且您的内容应该是有响应的。
相关文章:
- 从Web服务器下载图像按钮单击使用JavaScript
- 一个具有两个图像按钮的表单在只能按下一个按钮的情况下发送两个按钮值
- Javascript:图像按钮
- 如何通过单击图像按钮打开图像
- 安卓应用程序的“共享图像”按钮
- 当有人单击图像/按钮时打开弹出窗口
- 如何创建激活jQuery/js函数的图像按钮
- AngularJs 单击以切换表格中的图像按钮 src
- 用不同的图像/按钮替换图像 - javascript
- 悬停时无法显示图像按钮的工具提示项
- 带有下载图像按钮的灯箱
- 在少数几个选择上制作图像按钮
- 从 cs 页面更改图像按钮集的光标
- 提交图像按钮的焦点在IE 8中未突出显示
- 如何动态地将图像按钮和 OnClick 侦听器添加到 300+ 图像
- 重写:导航链接图像按钮效果
- 按百分比调整大小的图像按钮
- 具有多个覆盖和图像按钮的Flowplayer
- 将图像按钮转换为提交按钮
- 如何在javascript中使用html将图像按钮添加到链接中