網(wǎng)站制作NEWS
使用bootstrap 如何做自適應(yīng)的網(wǎng)頁，比如一個大圖如何適應(yīng)手機(jī)端和pc端
可以用media query媒體查詢來設(shè)置不同分辨率下的不同css樣式
/* 超小屏幕（手機(jī)，小于 768px） */
/* 沒有任何媒體查詢相關(guān)的代碼，因?yàn)檫@在 Bootstrap 中是默認(rèn)的（還記得 Bootstrap 是移動設(shè)備優(yōu)先的嗎？） */
/* 小屏幕（平板，大于等于 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;
}
}
想必你能理解我的意思
多重隨機(jī)標(biāo)簽