免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

基于HTML5+Css3的響應(yīng)式網(wǎng)站建設(shè)開發(fā)

2017-03-29    分類: 響應(yīng)式網(wǎng)站

隨著互聯(lián)網(wǎng)技術(shù)的高速發(fā)展,HTML5+CSS3已成為目前比較主流的Web前端開發(fā)技術(shù),其與以往的HTML+CSS相比,HTML5的新元素、語義化標(biāo)簽以及屬性,再加上CSS3的豐富的渲染效果,能夠使開發(fā)者極為方便、快速、靈活地實(shí)現(xiàn)web頁面的前端開發(fā),響應(yīng)式網(wǎng)站建設(shè)有幾個(gè)地方需要注意:

開發(fā)響應(yīng)式網(wǎng)站有幾個(gè)地方需要注意

第一點(diǎn):在網(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%。

第二點(diǎn):(注意)不使用絕對(duì)寬度,字體大小

width:auto; / width:XX%;
第三點(diǎn):(注意)字體大小
字體大小是頁面默認(rèn)大小的100%,即16像素
字體不要使用絕對(duì)大小"PX",要使用相對(duì)大小“REM”
html{font-size:62.5%;}
body {font:normal 100% Arial,sans-serif;font-size:14px; font-size:1.4rem; }

下面我們介紹一下html5和css3。

一、 HTML5

HTML5是下一代的HTML。HTML5是開放的Web網(wǎng)絡(luò)平臺(tái)的奠基石,HTML5的設(shè)計(jì)目的是為了在移動(dòng)設(shè)備上支持多媒體,其新的語法特征被引進(jìn)以支持這一點(diǎn),比如canvas、video和audio標(biāo)簽。HTML5還引進(jìn)了最新的功能,能夠改變用戶與文檔的交互方式。HTML5的優(yōu)點(diǎn)包括:

  1. 具有強(qiáng)大的可移植性;

  2. 提高了用戶體驗(yàn)和可用性;

  3. HTML5將被大量的應(yīng)用在游戲和移動(dòng)應(yīng)用程序;

  4. 對(duì)SEO比較友好;

  5. 增加的新標(biāo)簽有助于定義重要內(nèi)容;

  6. 能很好的替代FLASH和Silverlight;

  7. 能給站點(diǎn)帶來更多的音頻和視頻等多媒體元素。

二、 CSS3

CSS3是CSS(層疊樣式表)技術(shù)的升級(jí)版本,CSS演進(jìn)的一個(gè)主要變化就是W3C決定將CSS3分成一系列模塊。CSS3的新特征有很多,例如圓角效果、圖形化邊界、塊陰影與文字陰影、使用RGBA實(shí)現(xiàn)透明效果、漸變效果、使用@FontFace實(shí)現(xiàn)定制字體、多背景圖、文字或圖像的變形處理(旋轉(zhuǎn)、縮放、傾斜、移動(dòng))、多欄布局、媒體查詢等。

三、 頁面適應(yīng)性問題

移動(dòng)終端與電腦端比較,分辨率和屏幕尺寸都不相同,如果在移動(dòng)端還是把大屏幕尺寸設(shè)計(jì)成和電腦端大屏幕尺寸一樣的比如1024像素,字體大小還設(shè)計(jì)成電腦端的12像素或者14像素,那么就會(huì)出錯(cuò),因此,在設(shè)計(jì)移動(dòng)終端網(wǎng)頁時(shí),最好讓網(wǎng)頁的寬度自適應(yīng)于屏幕,萬維網(wǎng)聯(lián)盟在設(shè)計(jì)html的時(shí)候充分考慮到了這點(diǎn),我們只需要加上標(biāo)簽就可以。

四、 圖片適應(yīng)性問題

圖片分為背景圖片和通過標(biāo)簽引入的圖片,前者可以通過media query自動(dòng)的切換不同分辨率的版本,但是在不支持background image size的瀏覽器中背景圖片無法無級(jí)地調(diào)整大小(也就是在media query切換css的點(diǎn)上可以換一張不同分辨率的圖,但是沒法獲得兩張分辨率中間大小的版本),而且在很多情況下(比如cms中)并不適合用背景圖片。

通過標(biāo)簽引入的圖片,我們要使用延遲加載圖片的方法來加載圖片,也就是說在實(shí)際加載圖片之前,首先要用js檢查當(dāng)前屏幕的寬度,然后頁面加載不同分辨率的圖片,如屏幕寬度小于等于480,那么就加載80像素寬度的圖片,如屏幕寬度大于480小于等于768,那么就加載120像素的圖片,如果屏幕寬度大于768則加載160像素的圖片,如果屏幕寬度是600像素,那么就需要通過百分比來縮放120像素的圖片來達(dá)到合適的效果。這種處理方式對(duì)于移動(dòng)設(shè)備來說加載的圖片變小了,網(wǎng)頁瀏覽速度也減小了,但是在豎屏和橫屏的轉(zhuǎn)換,或者瀏覽器擴(kuò)大時(shí)圖片會(huì)由于放大而產(chǎn)生模糊問題,這個(gè)問題如果解決呢?我們認(rèn)為對(duì)于圖片的考慮應(yīng)該從網(wǎng)頁布局設(shè)計(jì)的開始就應(yīng)避免圖片在各窗口寬度下的尺寸相差不要太大,要排列更多的內(nèi)容,而不能通過擴(kuò)大圖片尺寸來填充由于瀏覽器窗口的擴(kuò)大而帶來的空間。

例如:移動(dòng)設(shè)備圖片自適應(yīng)的css代碼:

img{maxwidth:100%;height:auto;width:auto;}

五、 導(dǎo)航適應(yīng)性問題

導(dǎo)航如何能夠適應(yīng)屏幕的大小,怎樣適應(yīng)能夠更簡(jiǎn)單是我們研究的一個(gè)難點(diǎn),通過多種方法的對(duì)比,我們發(fā)現(xiàn)采用jQuery自適應(yīng)窗口大小設(shè)置導(dǎo)航菜單的方式比較簡(jiǎn)單。

例如:

.nav{lineheight:50px;background: #0099cc;position: relative;} 
.nav li{float:left;} 
.nav li a{display:block;padding:0 20px;color: #00C;} 
.navspan.navon{display:none;width:20px;position: absolute;top:12px;right:12px;cursor: pointer;} 
@media screen and (maxwidth:768px) 
{
.nav ul{display:none;width:100%;
}

網(wǎng)站標(biāo)題:基于HTML5+Css3的響應(yīng)式網(wǎng)站建設(shè)開發(fā)
標(biāo)題來源:http://m.newbst.com/news/75287.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營銷seo公司;服務(wù)項(xiàng)目有網(wǎng)站建設(shè)響應(yīng)式網(wǎng)站

廣告

聲明:本網(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è)計(jì)公司