这个页面的核心是:中间区域的大小会随着屏幕尺寸的不同而变化,而左边和右边的操作按钮会根据中间阅读区域的变化而变化,请问这样的布局应该怎么做呢?我看了源代码,没有明白是怎么回事
多谢指点
这是1366宽时的样子
这是1920宽时的样子
这个只是简单的position布局,没有什么其他新的东西。
给你一段我的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;
}
}
这个不用媒体查询也可以吧,五五分,不要把布局的宽度写死,用百分比就行,然后样式调整一下就好了
可以查阅关于响应式设计
的内容
媒体查询呀,用CSS的预编译工具,乘以不同的倍数就可以了
这是个IE10+的特性
https://developer.mozilla.org/en-US/docs/Web/CSS/columns
根据你的图片的样子,可以简单粗暴的理解为两个尺寸下的样式不完全相同
可以采用CSS3的媒体查询@media
,根据不同的屏幕尺寸采用不同的样式进行显示