本期和大家分享的是，前端代碼規(guī)范之html代碼規(guī)范的頭部代碼規(guī)范，接著還會(huì)分享SEO代碼優(yōu)化標(biāo)簽和樣式代碼規(guī)范CSS代碼規(guī)；響應(yīng)式布局就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端而不是為每個(gè)終端做一個(gè)特定的版本這個(gè)概念是為解決移動(dòng)互聯(lián)網(wǎng)瀏覽而誕生的在我們的移動(dòng)端的網(wǎng)頁設(shè)計(jì)中，要求很高，1像素的差別就影響我們的整個(gè)頁面的設(shè)計(jì)美感所以，我們；響應(yīng)式頁面中經(jīng)常用到根據(jù)屏幕密度設(shè)置不同的圖片這時(shí)就用到了 img 標(biāo)簽的srcset屬性srcset屬性用于設(shè)置不同屏幕密度下，img；響應(yīng)式HTML頁面，每個(gè)獨(dú)立模塊可放大查看，實(shí)現(xiàn)數(shù)據(jù)聯(lián)動(dòng)，圖表和表格數(shù)據(jù)切換這套銷售運(yùn)營(yíng)數(shù)據(jù)統(tǒng)計(jì)圖表頁面模板，是簡(jiǎn)單的。

第二步HTML結(jié)構(gòu) 在這個(gè)例子里，我有一個(gè)包括頭部?jī)?nèi)容側(cè)邊欄和頁腳的基本頁面布局頭部有固定的高度180像素，內(nèi)容容器是600像素而側(cè)邊欄是300像素第三步媒介查詢Media Queries CSS3 Media Query媒介查詢是響應(yīng)；所以如果想做更好的SEO優(yōu)化，移動(dòng)端網(wǎng)站是必不可少的響應(yīng)式網(wǎng)頁剛好滿足了這一條件，不需要單獨(dú)開發(fā)移動(dòng)端網(wǎng)站，一個(gè)網(wǎng)站滿足多端設(shè)備對(duì)SEO有好很大的好處而且響應(yīng)式的代碼結(jié)構(gòu)是div+css結(jié)構(gòu)，容易被搜索引擎抓??；靜態(tài)布局static layout 即傳統(tǒng)Web設(shè)計(jì)流式布局Liquid Layout 流式布局Liquid的特點(diǎn)也叫"Fluid" 是頁面元素的寬度按照屏幕分辨率進(jìn)行適配調(diào)整自適應(yīng)布局Adaptive Layout 自適應(yīng)布局的特點(diǎn)是分別為不同的屏幕分辨率定義布局，即創(chuàng)建多個(gè)靜態(tài)布局；網(wǎng)站怎么做到自適應(yīng)網(wǎng)頁關(guān)于網(wǎng)站如何做到自適應(yīng)網(wǎng)頁，可根據(jù)如下操作首先，在網(wǎng)頁代碼的頭部，加入一行viewport元標(biāo)簽swiper如何設(shè)置響應(yīng)式自適應(yīng)當(dāng)我們?cè)谧鼍W(wǎng)頁時(shí)，應(yīng)當(dāng)充分考慮到網(wǎng)頁自適應(yīng)的問題 否則可能會(huì)出現(xiàn)同一個(gè)；其次表格是自適應(yīng)響應(yīng)式的，當(dāng)頁面縮小到一定范圍時(shí)，表頭將以行的形式固定，數(shù)據(jù)可以水平拖動(dòng)整體來說，這個(gè)自定義表格用起。

實(shí)現(xiàn)方式響應(yīng)式設(shè)計(jì)的基本原理是通過媒體查詢檢測(cè)不同的設(shè)備屏幕尺寸做處理，為了處理移動(dòng)端，頁面頭部必須有meta聲明；代碼結(jié)構(gòu)，具體如下如何用 HTML和CSS 實(shí)現(xiàn)一個(gè)響應(yīng)式導(dǎo)航欄效果 web前端開發(fā) 網(wǎng)站主頁 關(guān)于我們 工作內(nèi)容 開發(fā)項(xiàng)目 聯(lián)系；一什么是響應(yīng)式布局響應(yīng)式布局指在同一頁面在不同屏幕尺寸下有不同的布局傳統(tǒng)的開發(fā)方式是PC端開發(fā)一套，移動(dòng)端再開發(fā)。

響應(yīng)式和自適應(yīng)有什么區(qū)別1靈活性不同靜態(tài)布局毫無靈活性可言，目前已逐漸被淘汰自適應(yīng)布局靜態(tài)布局的升級(jí)版，因其強(qiáng)大的靈活性，已逐漸成為高端網(wǎng)頁的代名詞流式布局靈活性更高，可適用于其他三種網(wǎng)站布局；lt！DOCTYPE HTML PUBLIC quotW3CDTD HTML 401 TransitionalENquot checkbox 1；網(wǎng)頁頭部標(biāo)簽首先在網(wǎng)頁代碼的頭部，加入一行viewport標(biāo)簽在網(wǎng)頁的頭部中增加以下這句話，可以讓網(wǎng)頁的寬度自動(dòng)適應(yīng)手機(jī)屏幕的。

關(guān)于網(wǎng)站如何做到自適應(yīng)網(wǎng)頁，可根據(jù)如下操作首先，在網(wǎng)頁代碼的頭部，加入一行viewport元標(biāo)簽viewport是網(wǎng)頁默認(rèn)的寬度和高度，上面這行代碼的意思是，網(wǎng)頁寬度默認(rèn)等于屏幕寬度width=devicewidth，原始縮 放比例initial；media only screen and maxwidth 400px #biaotifontsize18px#caidanwidth100%#caidan liwidth100%floatdaohangbtnwidth100%替換一下你的媒體查詢的css，就可以了 這是效果。