中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

手機(jī)移動(dòng)端web自適應(yīng)網(wǎng)頁設(shè)計(jì)(html/css控制)

2022-07-14    分類: 網(wǎng)站建設(shè)

一.允許網(wǎng)頁寬度自動(dòng)調(diào)整:


"自適應(yīng)網(wǎng)頁設(shè)計(jì)"底是怎么做到其實(shí)并不難。


首先,網(wǎng)頁代碼的頭部,加入一行viewport元標(biāo)簽。



viewport網(wǎng)頁默認(rèn)的寬度和高度,上面這行代碼的意思是網(wǎng)頁寬度默認(rèn)等于屏幕寬度


width=device-width原始縮放比例(initial-scale=1為1.0即網(wǎng)頁初始大小占屏幕面


積的100%



對(duì)于viewport屬性,真正在接觸移動(dòng)web開發(fā)是才遇到一把的ps布局都是固定的960px


1000px這種。


下面三篇文章是對(duì)viewport屬性詳細(xì)的解釋:


Viewport視區(qū)概念)pc端的理解


Viewport視區(qū)概念)移動(dòng)端的應(yīng)用


viewport視區(qū)概念(轉(zhuǎn))



對(duì)于老式IE678瀏覽器需要js處置,由于主要平臺(tái)是io和安卓,所有可以暫時(shí)不考慮



二.不使用絕對(duì)寬度


由于網(wǎng)頁會(huì)根據(jù)屏幕寬度調(diào)整布局,所以不能使用絕對(duì)寬度的布局,也不能使用具有絕對(duì)寬度的


元素。這一條非常重要。


具體說,CSS代碼不能指定像素寬度:


width:xxxpx;


只能指定百分比寬度:


width:xx%;


或者:width:auto;



這里開發(fā)是指一個(gè)網(wǎng)頁不只能用在ps上,也能同時(shí)用于移動(dòng)端,但是對(duì)于webapp這種還是需要單


獨(dú)做一個(gè)webapp使用的頁面。


對(duì)于這個(gè)知識(shí)點(diǎn),對(duì)于我目前做的項(xiàng)目有用處,主要用于控制限定數(shù)據(jù)庫里讀出來的圖片寬度。


詳見:手機(jī)webappjquerimobil初次使用心得和解決圖片自適應(yīng)大小問題



三.相對(duì)大小的字體


字體也不能使用絕對(duì)大?。╬x而只能使用相對(duì)大小(em

bodi{

font:normal100%Helvetica,<這一條。Arial,sans-serif;

}

上面的代碼指定,字體大小是頁面默認(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)頁設(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)頁設(shè)計(jì)"還必需實(shí)現(xiàn)圖片的自動(dòng)縮放。

這只要一行CSS代碼:

img{max-width:100%;}

這行代碼對(duì)于大多數(shù)嵌入網(wǎng)頁的視頻也有效,所以可以寫成:

img,object{max-width:100%;}

老版本的IE不支持max-width所以只好寫成:

img{width:100%;}

此外,window平臺(tái)縮放圖片時(shí),可能出現(xiàn)圖像失真現(xiàn)象。這時(shí),可以嘗試使用IE專有命令:

img{-ms-interpolation-mode:bicubic;}

或者,EthanMarcottimgSizer.j

addLoadEvfunction{

varimg=document.getElementByIdx_x_x"content".getElementsByTagName_r"img";

imgSizer.colimg;

};

不過,有條件的話,最好還是根據(jù)不同大小的屏幕,加載不同分辨率的圖片。有很多方法可以做


這一條,服務(wù)器端和客戶端都可以實(shí)現(xiàn)。

文章名稱:手機(jī)移動(dòng)端web自適應(yīng)網(wǎng)頁設(shè)計(jì)(html/css控制)
文章轉(zhuǎn)載:http://m.rwnh.cn/news/178228.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站內(nèi)鏈、品牌網(wǎng)站制作、網(wǎng)站改版小程序開發(fā)、企業(yè)建站、用戶體驗(yàn)

廣告

聲明:本網(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í)需注明來源: 創(chuàng)新互聯(lián)

成都定制網(wǎng)站建設(shè)
喀喇沁旗| 临夏市| 开封县| 张掖市| 衢州市| 揭阳市| 仪征市| 辉南县| 清原| 河津市| 七台河市| 磴口县| 双牌县| 宝坻区| 梅州市| 房产| 和平县| 唐山市| 航空| 杨浦区| 广灵县| 杭锦旗| 玛沁县| 仁化县| 临漳县| 铁力市| 阿拉尔市| 巢湖市| 鞍山市| 巩义市| 佳木斯市| 云梦县| 华亭县| 哈密市| 张家界市| 大化| 公安县| 双流县| 方正县| 伊金霍洛旗| 六枝特区|