media="screen and (min-width: 400px) and (max-device-width: 600px)"
href="smallscreen.css" />
如果屏幕寬度在400像素到600像素之間,則加載smallscreen.css文件。
除了用html標(biāo)簽加載css文件,還可以在現(xiàn)有css文件中加載。
@import url("tinyscreen.css") screen and (max-device-width: 400px);
七、css的@media規(guī)則
同一個(gè)css文件中,也可以根據(jù)不同的屏幕分辨率,選擇應(yīng)用不同的css規(guī)則。
@media screen and (max-device-width: 400px) {
.column {
float: none;
width:auto;
}
#sidebar {
display:none;
}
}
上面的代碼意思是,如果屏幕寬度小于400像素,則column塊取消浮動(dòng)(float:none)、寬度自動(dòng)調(diào)節(jié)(width:auto),sidebar塊不顯示(display:none)。
八、圖片的自適應(yīng)(fluid image)
除了布局和文本,"自適應(yīng)網(wǎng)頁設(shè)計(jì)"還必須實(shí)現(xiàn)圖片的自動(dòng)縮放。
這只要一行css代碼:
img { max-width: 100%;}
這行代碼對于大多數(shù)嵌入網(wǎng)頁的視頻也有效,所以可以寫成:
img, object { max-width: 100%;}
老版本的ie不支持max-width,所以只好寫成:
img { width: 100%; }
此外,windows平臺(tái)縮放圖片時(shí),可能出現(xiàn)圖像失真現(xiàn)象。這時(shí),可以嘗試使用ie的專有命令:
img { -ms-interpolation-mode: bicubic; }
或者,ethan marcotte的imgsizer.js。
addloadevent(function() {
var imgs = document.getelementbyid("content").getelementsbytagname("img");
imgsizer.collate(imgs);
});
不過,有條件的話,最好還是根據(jù)不同大小的屏幕,加載不同分辨率的圖片。有很多方法可以做到這一條,服務(wù)器端和客戶端都可以實(shí)現(xiàn)。
新聞名稱:手機(jī)網(wǎng)站建設(shè)是不是根據(jù)屏幕尺寸做不同的網(wǎng)頁-- 分享手機(jī)網(wǎng)站建設(shè)知識(shí)
標(biāo)題路徑:http://redsoil1982.com.cn/news/106558.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營銷seo公司;服務(wù)項(xiàng)目有網(wǎng)站建設(shè)、手機(jī)網(wǎng)站建設(shè)等
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源:
創(chuàng)新互聯(lián)