使用bootstrap 如何做自适应的网页，比如一个大图如何适应手机端和pc端
可以用media query媒体查询来设置不同分辨率下的不同css样式
/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }
给你来一段样例，你看看
@media(min-width:768px){.ipad
{
display:none;
}
.mobile
{
display:none;
}
.pc
{
display:block;
}
.row{
margin-left:0;
margin-right:0;
}
.home-bg{
//margin:0;
background:url(asset-path("common/home_big3.jpg"))centerno-repeat;
width:100%;
height:500px;
background-size:cover;
}
}
@media(max-width:767px){.ipad
{
display:block;
}
.mobile
{
display:none;
}
.pc
{
display:none;
}
.home-bg{
background:url(asset_path("common/home_1024.jpg"));
background-position:centercenter;
background-repeat:no-repeat;
background-size:cover;
//height:100%;
}
}
@media(max-width:480px){
.ipad
{
display:none;
}
.pc
{
display:none;
}
.mobile
{
display:block;
}
.home-bg{
background:url(asset_path("common/home_640.jpg"));
background-position:centercenter;
background-repeat:no-repeat;
background-size:cover;
height:600px;
}
}
想必你能理解我的意思
多重随机标签