0

编辑
以下代码获取 em 的大小，但与我的 css 不对应。 

function doOnOrientationChange() {
        // Orientation of device has changed, change the size of map and move the maphelp (if required)
        var eminpx = $("#1em").width();
        var largescreeninpx = eminpx*66.236;
        switch(window.orientation) {
            case -90:
            case 90:
                // Orientation is landscape
                console.log('66.236ems in px: ' + largescreeninpx + '. Screen width: ' + screen.height);
                $("#map").height(screen.width*0.7); // The screen width is the viewport height of the device because we're in landscape orientation
                // Will only work if we can actually get the em value of the width
                if (screen.height < largescreeninpx) {
                     // Small or medium screen, show map help below map
                     console.log('small screen');
                    $("#maphelp").css('margin-top', 0);
                } else {
                    // Larger screen, show map and map help side-by-side
                    $("#maphelp").css('margin-top', -screen.width*0.7);
                }
                break; 
            default:
                // Orientation is portrait
                alert('66.23ems in px: ' + largescreeninpx + '. Screen width: ' + screen.width);
                $("#map").height(screen.height*0.7);
                // Will only work if we can actually get the em value of the width
                if (screen.width < largescreeninpx) {
                     // Small or medium screen, show map help below map
                    $("#maphelp").css('margin-top', 0);
                } else {
                    // Larger screen, show map and map help side-by-side
                    $("#maphelp").css('margin-top', -screen.height*0.7);
                }
                break;
        }
    }

虽然在 CSS 中横向 iPad 不会触发@media screen and (min-width: 30em) and (max-width: 63.236em) {...}（意味着它的宽度超过 63.236ems），但在 JS 中它会触发console.log('small screen')，显示通过 JS 时它的屏幕宽度小于 66.236ems？

原始问题（几乎已回答） 我正在尝试围绕“金发姑娘方法”创建一个网站。电子表格中的一切都很好，但我正在尝试动态设置嵌入地图的高度，使其始终是用户当前视口高度的 90%。但是，在地图旁边也可能有一些“地图帮助”，允许浏览器视口足够大（在本例中为 66.23ems。纵向的 iPad 超过 66.23ems）。下面是我的代码，它被注释以显示什么不起作用。 

function doOnOrientationChange() {
        // Orientation of device has changed, change the size of map and move the maphelp (if required)
        switch(window.orientation) {
            case -90:
            case 90:
                // Orientation is landscape
                $("#map").height(screen.width*0.9); // The screen width is the viewport height of the device because we're in landscape orientation
                if ($(window).width() > 66.23) { // Need this in ems
                     // Small or medium screen, show map help below map
                    $("#maphelp").css('margin-top', 0);
                } else {
                    // Larger screen, show map and map help side-by-side
                    $("#maphelp").css('margin-top', -screen.width*0.9);
                }
                break; 
            default:
                // Orientation is portrait
                if ($(window).width() < 66.23) { // Need this in ems
                     // Small or medium screen, show map help below map
                    $("#maphelp").css('margin-top', 0);
                } else {
                    // Larger screen, show map and map help side-by-side
                    $("#maphelp").css('margin-top', -screen.height*0.9);
                }
                break;
        }
    }

所以，我的问题是，我怎样才能通过签入 ems 来触发正确的响应？

4

2 回答 2

0

创建一个跨度如下：

<span id="one_em">M</span>

像这样的CSS：

#one_em {
    display:none;
    width: 1em;
}

然后使用 jquery 获取 #one_em 元素的宽度。

const emWidth = $("#one_em").width();

注意：使用 1em 作为 id 会导致某些浏览器无法正确连接 CSS，因为有效的 HTML 4id必须以字母开头。使用 aM所以宽度实际上是一米宽。

于 2019-03-10T09:23:16.767 回答
-1

简单地学习在 em 和像素之间进行转换应该可以让您到达您需要去的地方：

https://stackoverflow.com/a/1463032/50358很好地回答了这个问题：ems 和像素之间有什么关系？

于 2012-05-24T22:23:34.270 回答