Question

我想建立一个网站来呈现一个webcomic。编程的主要目标是在所有屏幕尺寸和方向上始终显示完整漫画页面而不裁剪，尽可能大，但允许用户缩放和滚动。

我想要一个执行以下操作的布局（使用伪代码）：

if (viewportwidth >= (viewportheight * 3/2) + headerwidth) {
                            #  ^ comic width calculated from viewport height !
    comicheight = viewportheight;
    header = in sidebar;
    navigation = in sidebar;

enter image description here

} else {
    comicwidth = viewportwidth;
    header = as header;
    navigation = as footer;

enter image description here

我已经打破了这个近一个星期了，但是我可以得到一个固定的布局（总是标题或总是侧边栏）以流畅地缩放到不同的屏幕尺寸，或固定大小的元素（总是x像素）到流畅地改变他们的布局，但不是两者兼而有之。

在我看来，唯一的解决方案是@media规则可以实现视口宽度的单个像素增量，但这将是很多代码，我想避免这种情况。

有没有办法：

获取视口尺寸（宽度和高度）
计算哪个更大（横向或纵向）
计算横向视口的宽度是否足够宽，以适应漫视缩放到视口高度和标题并排
放置元素

CSS中的

我想avoid JavaScript。但是如果你有一个 light 解决方案（不包括或链接到整个库，如jQuery）和优雅的后备，我有兴趣听听你的建议。

该解决方案必须适用于IE 8以上的所有常见移动设备和所有桌面浏览器。

示例页面。您可能需要添加标签。

<!doctype html>
<html>
<head>
    <meta http-equiv="page-Type" page="text/html;charset=utf-8">

    <title>Comic</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style type="text/css">
        @-ms-viewport {
            width: device-width;  /* IE knows no meta viewport tag */
            }
    </style>

</head>
<body>
    <h1 id="header">
        Logo
    </h1>
    <img src="http://www.scifinow.co.uk/wp-content/uploads/2012/08/The-Hole-Of-Tank-Girl-graphic-novel-review-300x200.jpg" alt="comic"><!-- scale this ! -->
    <p id="nav">
        ‹ previous next ›
    </p>
</body>
</html>

Answer 1

你可以做那个宽度css

我们这是为了改变布局位置

@media screen and (max-width: 300px) {
    // do somthing
}

和你的colums写的百分比

http://jsfiddle.net/v5x1otza/

CSS中的if（viewportwidth＆gt; = elementwidth）？

1 个答案: