css - 请问这样的页面是如何布局的？感觉很不好做啊

Question

这个页面的核心是：中间区域的大小会随着屏幕尺寸的不同而变化，而左边和右边的操作按钮会根据中间阅读区域的变化而变化，请问这样的布局应该怎么做呢？我看了源代码，没有明白是怎么回事

多谢指点

这是1366宽时的样子

这是1920宽时的样子

Answer 1

媒体查询呀，用CSS的预编译工具，乘以不同的倍数就可以了

Answer 2

根据你的图片的样子，可以简单粗暴的理解为两个尺寸下的样式不完全相同

可以采用CSS3的媒体查询@media，根据不同的屏幕尺寸采用不同的样式进行显示

Answer 3

这个只是简单的position布局，没有什么其他新的东西。

Answer 4

这个不用媒体查询也可以吧，五五分，不要把布局的宽度写死，用百分比就行，然后样式调整一下就好了

Answer 5

这是个IE10+的特性

https://developer.mozilla.org/en-US/docs/Web/CSS/columns

Answer 6

给你一段我的LESS，懂CSS你能看懂

.response-width{
    @media (min-width: 1px) and (max-width:480px) {
        width:100%;
    }
    @media (min-width: 480px) {
        width:480px;
    }
}
header,footer{
    nav{
        display:block;
        margin:0 auto;
        .response-width;
    }
}
article{
    position:relative;
    margin:0 auto;
    .response-width;
}
.list.big img{
    @media (min-width: 1px) and (max-width:320px) {
        width:100%;
    }
    @media (min-width: 320px) {
        width:320px;
        margin:0 auto;
    }
}

Answer 7

可以查阅关于响应式设计的内容