响应式设计出了问题 [英] Responsive design gone awry
问题描述
我正在尝试为页面上的响应式横幅缩放一些字体，并为此找到并修改了我在网上找到的一些代码.基本上有两个部分:
在大小合适的平板电脑、笔记本电脑和台式机(或外部)上监视器，我将在顶部使用水平横幅 - 这有效.
在较小的平板电脑和手机上，我想在左侧 - 这不起作用.
========== HTML ==========
HTML 结构本质上是这样的(为了保护无辜者而更改了一些字符串；-)):
<section id="页面"><section id="header"><div id="logo"><img src="./Images/site/logo.png" alt="record" height="195px" width="195px"/></div><div id="h_banner"><img id="ban_img_left" src="./Images/site/lt.png"/><div id="banner_h"><div class="banner_string flexFontH"><u>Mumble</u><img src="./Images/site/And.png" height="200px"/><u>Grumble</u></div><img id="ban_img_right" src="./Images/site/rb.png"/></div><!-- h_banner --><div id="v_banner"><img id="ban_img_top" src="./Images/site/lt.png"/><div id="banner_v"><div class="banner_string flexFontV">M<br/>u<br/>m<br/>b<br/>l<br/>e<br/><img src="./Images/site/And.png" height="80px"/><br/>G<br/>r<br/>u<br/>m<br/>b<br/>l<br/>e<br/</div>
<img id="ban_img_bottom" src="./Images/site/rb.png"/></div><!-- v_banner --></section><!-- 标题 -->...<div id="TestFontSize" class="banner_string">WWWWWWWWWWWWWWWW</div>
========== CSS ==========
CSS 代码是基于网格的(省略了一些不相关的部分，例如 col:
#page {显示:网格；网格模板列:80 像素 120 像素自动 200 像素；网格模板行:200 像素自动 200 像素；}#header {网格列:1/5；网格行:1/2；显示:网格；网格模板列:200 像素自动 200 像素；网格模板行:200px；位置:相对；}#logo {网格列:1/3;网格行:1/2；位置:固定；}#banner_h {网格列:1/5；网格行:1/2;}#h_banner {网格列:1/5;}#ban_img_left {网格列:1/3；位置:绝对；高度:200px；左:10px;}#ban_img_right{网格列:4/5；位置:绝对；高度:200px；右:10px;}#banner_v {网格列:1/2；网格行:1/4；显示:网格；网格模板列:自动；网格模板行:80px 自动 80px；}#v_banner {网格行:2/3；显示:无；}#ban_img_top {网格行:1/2；显示:无；位置:固定；宽度:80px；顶部:10px;}#ban_img_bottom {网格行:3/4；显示:无；位置:固定；宽度:80px；底部:10px;}.banner_string {位置:绝对；高度:200px；宽度:100%；显示:弹性；对齐内容:居中；对齐项目:居中；/*字体系列:HaarlemDecoDEMO；字母间距:10px;*/字体系列:爵士乐；字母间距:5px；颜色:#83AFE4；}@media only screen and (max-width: 1000px) {/* [small-ish] iPhones */#page {grid-template-columns: 80px auto;网格模板行:自动；}#header {网格模板列:自动；网格模板行:自动；}#logo {显示:无；}#banner_h {显示:无；}#h_banner {显示:无；}#ban_img_left {显示:无；}#ban_img_right {显示:无；}#banner_v {显示:网格；宽度:80px；高度:100%；位置:固定；}#v_banner {显示:块；}#ban_img_top {显示:块；}#ban_img_bottom {显示:块；}.banner_string {显示:内联；宽度:80px；高度:100%；位置:固定；显示:块；变换:翻译(25px，0px)；}}========== JS ==========
Javascript 是在横幅中缩放字体的响应方面发挥作用的地方.我承认我使用的一些数字是通过反复试验来找到似乎有效的东西，所以请加一点盐.
flexFont = function() {var len = "Mumble & Grumble".length;/* (1) 水平横幅 */var hBanner = $(".flexFontH");var hBannerWidth = $(hBanner).width();var hBannerHeight = $(hBanner).height();如果 (hBannerHeight > 0) {var fontSize = 2 * (hBannerWidth - (2 * hBannerHeight))/len;/* 爵士乐 */if (fontSize > 154) { fontSize = 154;}/* 最大适合 Jazz-let 的 200 像素高度 */$(hBanner).css("fontSize", fontSize+"px");}/* (2) 垂直横幅 */var vBanner = $(".flexFontV");var vBannerWidth = $(vBanner).width();var vBannerHeight = $(vBanner).height();如果(vBannerWidth > 0){var fontSize = 1.125 * (vBannerHeight - (2 * vBannerWidth))/len;var lineHeight = (fontSize - 5) + "px";var test = document.getElementById("TestFontSize");test.style.fontSize = fontSize+"px";var stringWidth = (test.clientWidth + 1);var paddingTop = ((vBannerHeight - stringWidth)/2) + "px";var h = (vBannerHeight - 160) + "px";$(vBanner).css({"fontSize": fontSize+"px", "height": h, "padding-top": paddingTop, "line-height": lineHeight});}}window.onload = 函数(事件){flexFont();}window.onresize = 函数(事件){flexFont();}========== 问题 ==========
当我调整窗口大小时，它足够宽以使用水平横幅 - 一切都按我的意愿工作，横幅中的字体会随着窗口宽度的增加/减小而放大/缩小.
当我调整窗口的大小时，它足够窄以使用垂直横幅 - 文本在第一次重绘时消失.如果我刷新页面，它会显示出来，但是如果我调整窗口大小(更窄、更高、更短)，它会再次消失 - 显然问题是 $(vBanner).height() 变为0"，因此所有计算都基于该值也是0".
这是在我的笔记本电脑上尝试模拟屏幕尺寸的变化.在我的手机上，它仍然几乎相同:当我第一次渲染页面时，垂直横幅看起来不错，但如果我将方向更改为/从横向/纵向 - 再次，文本消失.
那么 - 任何人都可以弄清楚为什么会这样吗?而且 - 更重要的是，我可以做些什么来修复它?
您可以简化很多.您不需要为此使用 javascript 或媒体查询，您可以使用视口单位.vw 代表视口宽度，vh 代表视口高度.这些对于字体非常有价值，因为它们基于视口的宽度或高度，即网页的用户可见区域(根据设备调整大小而改变)
font-size: 5vw;^ 视口宽度的 5%.这是一个jsFiddle 所以你可以看到它的实际效果
I'm trying to get some fonts to scale for a responsive banner on my page, and found and modified some code I found online for these purposes. There are basically two parts to this:
On decent sized tablets, laptops, and desktop (or external) monitors, I will use a horizontal banner at the top - this works.
On smaller tablets and phones, I want to use a vertical banner on the left side - this is not working.
========== HTML ==========
The HTML structure is essentially this (some strings changed to protect the innocent ;-)):
<body>
<section id="page">
<section id="header">
<div id="logo"><img src="./Images/site/logo.png" alt="record" height="195px" width="195px"/></div>
<div id="h_banner">
<img id="ban_img_left" src="./Images/site/lt.png"/>
<div id="banner_h">
<div class="banner_string flexFontH"><u>Mumble</u> <img src="./Images/site/And.png" height="200px"/> <u>Grumble</u></div>
</div>
<img id="ban_img_right" src="./Images/site/rb.png"/>
</div><!-- h_banner -->
<div id="v_banner">
<img id="ban_img_top" src="./Images/site/lt.png"/>
<div id="banner_v">
<div class="banner_string flexFontV">M<br/>u<br/>m<br/>b<br/>l<br/>e<br/>
<img src="./Images/site/And.png" height="80px"/>
<br/>G<br/>r<br/>u<br/>m<br/>b<br/>l<br/>e<br/></div>
</div>
<img id="ban_img_bottom" src="./Images/site/rb.png"/>
</div><!-- v_banner -->
</section><!-- header -->
...
<div id="TestFontSize" class="banner_string">WWWWWWWWWWWWWWWW</div>
========== CSS ==========
The CSS code is grid-based (ommitted some non-pertinant pieces like col:
#page {
display: grid;
grid-template-columns: 80px 120px auto 200px;
grid-template-rows: 200px auto 200px;
}
#header {
grid-column: 1/5; grid-row: 1/2;
display: grid;
grid-template-columns: 200px auto 200px;
grid-template-rows: 200px;
position: relative;
}
#logo {grid-column: 1/3; grid-row: 1/2; position: fixed;}
#banner_h {grid-column: 1/5; grid-row: 1/2;}
#h_banner {grid-column: 1/5;}
#ban_img_left {grid-column: 1/3; position: absolute; height: 200px; left: 10px;}
#ban_img_right{gird-column: 4/5; position: absolute; height: 200px; right: 10px;}
#banner_v {
grid-column: 1/2; grid-row: 1/4;
display: grid;
grid-template-columns: auto;
grid-template-rows: 80px auto 80px;
}
#v_banner {grid-row: 2/3; display: none;}
#ban_img_top {grid-row: 1/2; display: none; position: fixed; width: 80px; top: 10px;}
#ban_img_bottom {grid-row: 3/4; display: none; position: fixed; width: 80px; bottom: 10px;}
.banner_string {
position:absolute; height: 200px; width: 100%;
display: flex; justify-content: center; align-items: center;
/*font-family: HaarlemDecoDEMO; letter-spacing: 10px;*/
font-family: Jazz-let; letter-spacing: 5px;
color: #83AFE4;
}
@media only screen and (max-width: 1000px) { /* [small-ish] iPhones */
#page {grid-template-columns: 80px auto; grid-template-rows: auto;}
#header {grid-template-columns: auto; grid-template-rows: auto;}
#logo {display: none;}
#banner_h {display: none;}
#h_banner {display: none;}
#ban_img_left {display: none;}
#ban_img_right {display: none;}
#banner_v {display: grid; width: 80px; height: 100%; position: fixed;}
#v_banner {display: block;}
#ban_img_top {display: block;}
#ban_img_bottom {display: block;}
.banner_string {
display: inline; width: 80px; height: 100%; position: fixed; display: block;
transform: translate(25px, 0px);
}
}
========== JS ==========
The Javascript is where the responsive aspect of scaling the font in the banner comes into play. I'll admit that some of the numbers I've used were from trial-and-error to find something that seemed to work, so take it with a modicum of salt.
flexFont = function() {
var len = "Mumble & Grumble".length;
/* (1) horizontal banner */
var hBanner = $(".flexFontH");
var hBannerWidth = $(hBanner).width();
var hBannerHeight = $(hBanner).height();
if (hBannerHeight > 0) {
var fontSize = 2 * (hBannerWidth - (2 * hBannerHeight)) / len; /* Jazz-let */
if (fontSize > 154) { fontSize = 154; } /* max that fits within 200px height for Jazz-let */
$(hBanner).css("fontSize", fontSize+"px");
}
/* (2) vertical banner */
var vBanner = $(".flexFontV");
var vBannerWidth = $(vBanner).width();
var vBannerHeight = $(vBanner).height();
if (vBannerWidth > 0) {
var fontSize = 1.125 * (vBannerHeight - (2 * vBannerWidth)) / len;
var lineHeight = (fontSize - 5) + "px";
var test = document.getElementById("TestFontSize");
test.style.fontSize = fontSize+"px";
var stringWidth = (test.clientWidth + 1);
var paddingTop = ((vBannerHeight - stringWidth) / 2) + "px";
var h = (vBannerHeight - 160) + "px";
$(vBanner).css({"fontSize": fontSize+"px", "height": h, "padding-top": paddingTop, "line-height": lineHeight});
}
}
window.onload = function(event) {
flexFont();
}
window.onresize = function(event) {
flexFont();
}
========== PROBLEM ==========
When I resize the window when it is wide-enough to use the horizontal banner - it all works as I want, the font in the banner scales up / down as the window width increases / decreases.
When I resize the window when it is narrow enough to use the vertical banner - the text disappears on the first redraw. If I refresh the page it shows up, but then if I resize the window (narrower, taller, shorter) it disappears again - and apparently the problem is that $(vBanner).height() becomes '0' and so all calculations based on that value are also '0'.
That's on my laptop trying to simulate the change of screen size. On my phone, it's still pretty much the same thing: when I first render the page, the vertical banner looks fine, but then if I change the orientation to / from landscape / portrait - again, the text disappears.
So - can anywone figure out why this might be the case? and - more importantly, what I might be able to do to fix it?
You can simplify this a lot. You don't need javascript or media queries for this, you can use viewport units. vw stands for viewport width and vh stands for viewport height. These are extremely valuable for fonts because they are based on the width or height of the viewport, which is the user's visible area of a web page (which changes on resize and based on device)
font-size: 5vw;
^ 5% of the viewport width. Here's a jsFiddle so you can see it in action
这篇关于响应式设计出了问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
