當前位置：首頁 » 網站代碼 » 響應式網頁代碼

響應式網頁代碼

發布時間: 2021-03-24 02:30:41

Ⅰ Dreamweaver中響應式網頁代碼如何寫

默認一個固定寬度為980px的網頁，當瀏覽器窗口比980px小的時候，這個布局就變為100%比寬度的液態布局，而不是固定寬度。當瀏覽器窗口再縮小於700px的時候，我們就隱藏側邊欄。當窗口小於480px的時候，橫向導航條隱藏，換成點擊下拉效果的導航條。

如上圖，從左至右依次為移動版本—>平板電腦—>桌面瀏覽器的效果。
1、響應式網頁結構
首先，我們先來看下上面案例展示的html結構，如下圖所示：

可以說這是一個很典型的博客模版結構。一個wrapper容器包含了頭部、內容、側欄、底部。

2、Meta標簽
其次就需要我們針對移動設備加入這個meta標簽。告訴webkit內核瀏覽器初始縮放比例為1。（很多iOS和Android的瀏覽器都是基於webkit內核的）
<meta name="viewport" content="width=device-width; initial-scale=1.0">
IE8或者更早的瀏覽器並不支持Media Query。你可以使用media-queries.js或者respond.js來為IE添加Media Query支持。

如果你的網站頁面中用了html5文檔聲明，用到了很多html5標簽，但是這些標簽在ie9以下版本是不支持的，所以我們必須引用一個html5.js文件使得這些標簽被其它低版本瀏覽器確認。

3、媒介查詢-Media Queries
在這里馬海祥就不再詳細的講正常頁面下的布局如何寫了。在此主要講解下媒體查詢media queries這個css的設計思路。這個是css3的屬性，也是我們這個響應式網頁設計的最重要的部分。可以說是響應式設計的核心。它根據條件告訴瀏覽器如何為指定視圖寬度渲染頁面。
<link href="media_queries.css" rel="stylesheet" type="text/css">
下面我們用CSS3的媒介查詢（Media Query）特性使得網頁適應不同設備，即根據設備的解析度和縮放自動重新布局。
@media screen and (max-width: 480px) {
這里就是重新設定一些css的屬性
}
（1）、當瀏覽器視圖寬度為小於等於980像素時，如下規則將會生效。基本上，我會將所有的容器寬度從像素值設置為百分比以使得容器大小自適應。
#pagwraper { width: 94%;}重新設定容器寬度為94%;
#content { width: 65%; padding: 3% 4%;}重新設定內容寬度為65%;
#sidebar { width: 30%;}重新設定側邊欄寬度為30%

注意這里我們用到了%，使得頁面是一個流體布局。
（2）、當瀏覽器視圖寬度為小於等於700像素時，視圖指定#content和#sidebar的寬度為自適應並且清除浮動，使得這些容器按全寬度顯示。
#content { width: auto;float: none;margin: 20px 0;}
#sidebar { display:none; width: 100%; margin: 0; float: none; }

容器寬度繼承了上面94%的寬度，這個時候我們設定內容寬度為自動，使其填滿外部的wraper容器。並清除其浮動樣式。這個時候的瀏覽的頁面，可以權衡下右邊側欄的重要程度，如果覺得有必要繼續在頁面中顯示，我們可以清除其浮動，並把寬度也設為100%，這樣就在content這個容器下顯示。但馬海祥覺的一般情況下，在這么小的瀏覽窗口中，用戶只想看到最主要的內容，右邊側欄成為了一個補助模塊，那麼可以直接把它隱藏掉。這樣可以減少頁面的高度。
（3）、當瀏覽器窗口小於等於480px的時候，一般這個就是iPhone的橫向寬度。就要將#header元素的高度設置為自適應，將h1的字體大小修改為24像素並隱藏側邊欄。
首先我們設計webkit內核瀏覽器下禁用文字大小調整，代碼如下：
html { -webkit-text-size-adjust: none; }
其次就是代碼的轉換了，如下圖所示：

其實在480px寬度下的時候，整體框架布局已經不用設置，馬海祥認為我們應該考慮得更多的是怎麼把一個良好的頁面布局展示給用戶。而在這個模式下，如果導航條有很多選項的時候，就會相互堆疊換行，那麼這里我們設計成點擊出下拉菜單形式，如下圖所示：

這里我們首先考慮在小設備窗口下header太高已經占據了大半的屏幕顯示，所以這里我們重新設定下header的高度，能完整呈現出這個站點logo就可以了。在480px小設備窗口下瀏覽，頁面內容會很長，這個時候我們要在底部加個返回頁面頂部的按鈕。

Ⅱ 網頁中做到自適應的響應式頁面有幾種方法

如果很多頁面都需要做自適應的話，建議使用bootstrap這類成熟的框架，如果頁面不多，可以使用媒體查詢的方式：
@media screen and (min-width:1201px) and (max-width:1366px){}

@media screen and (max-width:1200px){}

Ⅲ 響應式網站是用相同的代碼不同的css嗎

這位網友你好，響應式網站是指網站樣式根據屏幕大小自適應，基本的HTML結構不變，不同屏幕應用不同的css代碼，可以用媒體查詢，也就是@media這個來做。

舉例：

@mediascreenand(max-width:960px){
body{background-color:red;}
}
@mediascreenand(max-width:480px){
body{background-color:blue;}
}

在不同的屏幕大小下顯示不同的顏色，你可以縮放瀏覽器窗口查看一下效果。

Ⅳ 如何將web頁面改成響應式

第一步：檢測網頁響應式
瀏覽器打開調試模式，打開響應式設計模式，在預覽區域拖動大小范圍，如果頁面元素隨大小變化而自適應，則頁面是響應式頁面，反之，頁面是固定非響應式頁面。如圖：

第二步：編輯網頁源文件
用Dreamweaver打開頁面源文件，查看代碼樣式及文件結構，（Web頁面的視覺效果由CSS樣式表文件控制）。如圖：

第三步：植入響應式代碼
在CSS樣式表中插入以下代碼：
@media screen and (min-width:200px) and (max-device-width:640px){
/*這里寫元素的樣式*/
}
代碼解釋：這句代碼是指定了在200像素~640像素之間的終端，顯示的效果，在其他終端不顯示。

第四步：橫屏響應式設計
在CSS中插入以下代碼
@media screen and (min-width:200px) and (max-device-width:640px){
.box{ width:100%;height:auto; margin:0 auto; background:#FFFFFF;}
}
控制元素在終端的橫向展示（全屏拉伸縮放無滾動條），垂直方向用滾動條展示。如圖：

第五步：豎屏響應式設計
在CSS中插入以下代碼
@media screen and (min-width:200px) and (max-device-width:640px){
.box{ width:auto;height:100%; margin:0 auto; background:#FFFFFF;}
}
控制元素在終端的橫向展示（全屏拉伸縮放無滾動條），垂直方向用滾動條展示。如圖：

第六步：全屏響應式設計
在CSS中插入以下代碼
@media screen and (min-width:200px) and (max-device-width:640px){
.box{ width:100%;height:100%; margin:0 auto; background:#FFFFFF;}
}
控制元素在終端的橫向展示（全屏拉伸縮放無滾動條），垂直方向用滾動條展示。如圖：

7
第七步：加工檢測
響應式設計完成之後，用不同的終端全部檢測一遍，有不合格的地方繼續修改，這是程序員必須知道的也不能忽視的。

Ⅳ 有沒有誰有一個自適應(響應式)網頁的源碼或者一個自適應網站的網址

http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html
這里是一復個自適應制網站的設計模式，你可以參考一下。

Ⅵ 如何實現html響應式網頁代碼如何實現（求給關鍵代碼）

你去下載個bootstrap，然後按照他的使用手冊一步一步的來，也許你就能找到點感覺了。在他的框架下按照手冊來，你自己寫的東西也都是響應的。

Ⅶ css的圖片響應式代碼

<div style="width:100%; height:300px; background:url(1.jpg) center center no-repeat #8bbbff;"></div>
div寬度100%
載入的居中圖片以背景形式，<div>也可以改為<a>
重點在背景後面的兩個center 第一個是左右居中，第二個是上下居中
如果圖片本身不夠大，可以再加顏色值來襯托，及時顯示器再大兩側也能有顏色墊底。
上述是居中的方法，如果再想做成輪播，我這里有現成代碼，如有需求可以索要。

Ⅷ html5怎麼製作一個響應式網頁

HTML5 製作響應式網頁，首先需要考慮是全平台適配還是只是移動端適配。這里以移動端響應式網站為例，講述如何製作響應式網頁。

1、選定基本設計尺寸，一般以1080為基準。確定響應式web設計的應用場景之後，和美工（或設計師）溝通，之前，一般需要美工出幾套主流移動設備屏幕解析度的設計圖，現在，使用流式布局以及rem等可以使用一套設計圖，以最常用的移動設備屏幕解析度為基準。

2、當美工完成設計圖之後，前端工程師的工作就開始了。這時你就可以使用PS或是FW進行切圖了。一般說來，Fireworks cs6切圖更快，但是Fireworks有時會有圖片失真的情況發生，所以，有時需要使用PS進行配合，PS有切片工具可以專門用來切圖。

Ⅸ 響應式網站需要什麼代碼

HTML5遵循web3規范大腕互聯響站建站一鍵製作響應式網站 ,希望對你有幫助

閱讀全文

響應式網頁代碼

與響應式網頁代碼相關的閱讀推薦