1.你可以用js去計算在不同的寬度情況下,調用哪一個css,用if去判斷;2.或者也可以設置min-width:800px和max-width:1600px;
說真的啊,現在做響應式設計,都不用你說這種限制分辨率的了。建議使用bootstrap框架來進行專業的響應式設計或在手機端采用百分比的設計更好適合響應需求。這里青鋒建站先解決你的這個問題:
解決這個問題需要根據不同的分辨率來設置不同的寬度,先給<body>body標簽添加一個my-width類。然后針對這個類來設計樣式,在不同的分辨率下來規定這個寬度。具體代碼如下:
@mediaonlyscreenand(min-width:1700px)//表示屏幕像素寬度大于1700PX時寬度為1600PX
{
.my-width{width:1600px;}
}
@mediaonlyscreenand(max-width:1600px)and(min-width:1200px)//寬度在1200-1600之間是設置寬度為1180px
{
.my-width{width:1180px;}
}
@mediaonlyscreenand(max-width:1200px)and(min-width:800px)//寬度在800-1200之間是設置寬度為800px
{
.my-width{width:800px;}
}
這里給你一個思路,可以再把寬度進行細分,但是內部的塊元素也需要在不同分辨率下添加自定義寬度,建議使用專業的響應式設計框架或在PC端使用像素,在手機端平板使用百分比。如果覺得青鋒建站說得好,給個贊,順便關注一下。