2022-07-14 分類(lèi): 網(wǎng)站建設(shè)
一.允許網(wǎng)頁(yè)寬度自動(dòng)調(diào)整:
"自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)"底是怎么做到其實(shí)并不難。
首先,網(wǎng)頁(yè)代碼的頭部,加入一行viewport元標(biāo)簽。
viewport網(wǎng)頁(yè)默認(rèn)的寬度和高度,上面這行代碼的意思是網(wǎng)頁(yè)寬度默認(rèn)等于屏幕寬度
width=device-width原始縮放比例(initial-scale=1為1.0即網(wǎng)頁(yè)初始大小占屏幕面
積的100%
對(duì)于viewport屬性,真正在接觸移動(dòng)web開(kāi)發(fā)是才遇到一把的ps布局都是固定的960px
1000px這種。
下面三篇文章是對(duì)viewport屬性詳細(xì)的解釋?zhuān)?/p>
Viewport視區(qū)概念)pc端的理解
Viewport視區(qū)概念)移動(dòng)端的應(yīng)用
viewport視區(qū)概念(轉(zhuǎn))
對(duì)于老式IE678瀏覽器需要js處置,由于主要平臺(tái)是io和安卓,所有可以暫時(shí)不考慮
二.不使用絕對(duì)寬度
由于網(wǎng)頁(yè)會(huì)根據(jù)屏幕寬度調(diào)整布局,所以不能使用絕對(duì)寬度的布局,也不能使用具有絕對(duì)寬度的
元素。這一條非常重要。
具體說(shuō),CSS代碼不能指定像素寬度:
width:xxxpx;
只能指定百分比寬度:
width:xx%;
或者:width:auto;
這里開(kāi)發(fā)是指一個(gè)網(wǎng)頁(yè)不只能用在ps上,也能同時(shí)用于移動(dòng)端,但是對(duì)于webapp這種還是需要單
獨(dú)做一個(gè)webapp使用的頁(yè)面。
對(duì)于這個(gè)知識(shí)點(diǎn),對(duì)于我目前做的項(xiàng)目有用處,主要用于控制限定數(shù)據(jù)庫(kù)里讀出來(lái)的圖片寬度。
詳見(jiàn):手機(jī)webappjquerimobil初次使用心得和解決圖片自適應(yīng)大小問(wèn)題
三.相對(duì)大小的字體
字體也不能使用絕對(duì)大小(px而只能使用相對(duì)大?。╡m
bodi{
font:normal100%Helvetica,<這一條。Arial,sans-serif;
}
上面的代碼指定,字體大小是頁(yè)面默認(rèn)大小的100%即16像素。
h1{
font-size:1.5em;
}
然后,h1大小是默認(rèn)大小的1.5倍,即24像素(24/16=1.5
small{
font-size:0.875em;
}
small元素的大小是默認(rèn)大小的0.875倍,即14像素(14/16=0.875
四.流動(dòng)布局(fluidgrid
"流動(dòng)布局"含義是各個(gè)區(qū)塊的位置都是浮動(dòng)的不是固定不變的
.main{
float:right;
width:70%;
}
.leftBar{
float:left;
width:25%;
}
float好處是如果寬度太小,放不下兩個(gè)元素,后面的元素會(huì)自動(dòng)滾動(dòng)到前面元素的下方,不
會(huì)在水平方向overflow溢出)防止了水平滾動(dòng)條的呈現(xiàn)。
另外,絕對(duì)定位(position:absolut使用,也要非常小心。
五."自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)"核心,就是CSS3引入的MediaQueri模塊。
意思就是自動(dòng)探測(cè)屏幕寬度,然后加載相應(yīng)的CSS文件。
media="screenandmax-device-width:400px"
href="tinyScreen.css"/>
上面的代碼意思是如果屏幕寬度小于400像素(max-device-width:400px就加載
tinyScreen.css文件。
media="screenandmin-width:400pxandmax-device-width:600px"
href="smallScreen.css"/>
如果屏幕寬度在400像素到600像素之間,則加載smallScreen.css文件。
除了用html標(biāo)簽加載CSS文件,還可以在現(xiàn)有CSS文件中加載。
@importurl"tinyScreen.css"screenandmax-device-width:400px;
六.CSS@media規(guī)則
同一個(gè)CSS文件中,也可以根據(jù)不同的屏幕分辨率,選擇應(yīng)用不同的CSS規(guī)則。
@mediascreenandmax-device-width:400px{
.column{
float:none;
width:auto;
}
#sidebar{
display:none;
}
}
上面的代碼意思是如果屏幕寬度小于400像素,則column塊取消浮動(dòng)(float:non寬度自動(dòng)
調(diào)節(jié)(width:autosidebar塊不顯示(display:non
七.圖片的自適應(yīng)(fluidimag
除了布局和文本,"自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)"還必需實(shí)現(xiàn)圖片的自動(dòng)縮放。
這只要一行CSS代碼:
img{max-width:100%;}
這行代碼對(duì)于大多數(shù)嵌入網(wǎng)頁(yè)的視頻也有效,所以可以寫(xiě)成:
img,object{max-width:100%;}
老版本的IE不支持max-width所以只好寫(xiě)成:
img{width:100%;}
此外,window平臺(tái)縮放圖片時(shí),可能出現(xiàn)圖像失真現(xiàn)象。這時(shí),可以嘗試使用IE專(zhuān)有命令:
img{-ms-interpolation-mode:bicubic;}
或者,EthanMarcottimgSizer.j
addLoadEvfunction{
varimg=document.getElementByIdx_x_x"content".getElementsByTagName_r"img";
imgSizer.colimg;
};
不過(guò),有條件的話,最好還是根據(jù)不同大小的屏幕,加載不同分辨率的圖片。有很多方法可以做
這一條,服務(wù)器端和客戶端都可以實(shí)現(xiàn)。
文章名稱(chēng):手機(jī)移動(dòng)端web自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)(html/css控制)
文章鏈接:http://m.rwnh.cn/news28/178228.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供企業(yè)建站、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站維護(hù)、網(wǎng)頁(yè)設(shè)計(jì)公司、網(wǎng)站建設(shè)、外貿(mào)建站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容