導航:首頁 > 萬維百科 > 簡單響應式網頁設計

簡單響應式網頁設計

發布時間:2020-10-27 03:01:55

1、自適應網頁設計和響應式網頁設計有什麼區別

通俗的說,自適應網頁設計也是響應式網頁設計,響應式網頁設計也是自適應網頁設計。但是真正的細分起來,自適應只是響應式的一個子集,指網頁中整體大圖的自適應或者banner的自適應。

響應式設計可以一個網站兼容多個不同終端

響應式網頁設計優勢:流體網格的網站適合響應式網頁設計。

1、靈活性強,可以適應不同解析度的設備

2、方便快捷的解決多設備顯示適應問題

自適應網頁設計優勢:固定斷點的網站適合自適應網頁設計。

1、實施起來代價更低,測試更容易

2、自適應布局可以讓設計更加可控,因為它只需要考慮幾種狀態就可以了

雖然響應式/自適應網頁設計會帶來兼容各種設備工作量大、代碼累贅、載入時間長的缺點,但它們能「一次設計,普遍適用」,可以根據屏幕解析度自適應以及自動縮放圖片、自動調整布局,它們不只是技術的實現,更多的是對於設計的全新思維模式。

2、響應式網頁 界面設計 多大字型大小

響應式的網頁設計,除了布局的變化以外,還有字型大小的改變。通常使用@media。比如:
h1 {
font-size: 48px;
}
@media (max-width: 767px){
h1 {
font-size: 36px;
}
}

以上的CSS可以讓網頁在設備屏幕尺寸小於768px的時候,讓h1的字型大小從原始的48px變為36px。在實際的應用中,尤其是h1、h2、h3等等這樣的大標題的字型大小設置,其實還是有一點點的瑕疵。因為可能需要額外多設定幾個@media的寬度。
屏幕寬度從1280px、1024px、768px、640px、480px,直到320px,跨度非常大,為了保持比較完美的顯示,通常會用Screen Size之類的瀏覽器插件,來顯示不同寬度下布局的顯示狀況。h1 標簽內,因為字型大小大,字數也或多或少,為保險起見,有時會為每一種屏幕寬度都定製一個合適的字型大小,這樣稍顯麻煩。
有一種解決的方案,用Viewport的方法。
%vw = %viewport width

我們用%vw來定義字型大小,也就是說用屏幕寬度的百分比來定義字型大小的大小。例如:
h1 {
font-size: 2.5vw;
}

這樣一來,無論屏幕寬度如何變化,h1的字型大小會保持在Viewport寬度的2.5%的大小。

3、如何用一簡單的CSS製作響應式HTML網頁

建議展開閱讀

新人如果想快速開發出響應式網站建議使用響應式框架Bootstrap,Foundation等等......

三個部分[Viewport][網格視圖][媒體查詢]

1.先在head裡面設置Viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

用戶可以通過平移和縮放來看網頁的不同部分。

2.很多響應式都基於網格視圖設計

響應式網格視圖通常是 12 列,寬度為100%,在網頁自動伸縮

比如CSS裡面寫

* {
    box-sizing: border-box;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

這樣即可在html寫

<div class="row">
<div class="col-3">
<ul>
<li>標題1</li>
<li>標題2</li>
<li>標題3</li>
<li>標題4</li>
</ul>
</div>
<div class="col-9">
<h1>2333333</h1>
<p>333333333333333333</p>
<p></p>
</div>

達到簡單的響應式效果[拖拽瀏覽器大小查看]

圖片響應式方法

div {
width: 100%;
height: 400px;
background-image: url('url');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
}

background-size 屬性設置為 "contain", 圖片比例會自動縮放。

3.媒體查詢主要用於針對不同的媒體類型定義不同的樣式

比如我在電腦顯示圖片1,但是在手機顯示的是圖片2

詳細可以私信我

4、怎樣做出H5響應式網頁設計

15響應式網頁設計是需要js的支撐了。首先你要熟練使用js,才能學會作出響應式的網頁。如果不會的話,建議你先去使用響應式的網站模板,先去下載幾個響應式網頁模板,根據這個模板查看他的源碼。慢慢的自己就可以設計出這個響應式網頁模板。像這類模板下載的網站有很多。比如開創著素材、單張素材。

5、HTML5怎麼製作響應式網頁

1.調整視口

代碼實例:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8" />
    <title>布局之路-移動端開發實例</title>
    <meta name="viewport" content="width=device-width,user-scalable = no" />
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
</head>
<body>
    <div class="wrap"></div>
</body>
</html>

代碼解析:由於使用不同設備打開網頁時,寬度均有所不同,所以不能講視口設置為固定值,應當為width=device-width,即將視口設置為當前設備的寬度。

2.確定設計圖的最小字體

瀏覽器(部分)能夠顯示的最小字體未12px,當移動端頁面寬度為320px時,要保證最小字體為12px,那麼在1080px的設計圖中,最小字體應當為42px。

代碼實例:

    <style type="text/css">
        html {
            font-size: 42px;
        }
    </style>

3.浮動布局

各個區塊都是浮動的,不是固定不變的。為了能自適應各個窗口。

代碼實例:

.main {
  float: left;
  width: 70%;
}
.box {
    float: left;
    width: 60.93%;
    font-size: 1.71rem;
    text-align: center;
    line-height: 4.64rem;
}

float浮動的好處就是,如果寬度不夠放置下這個元素,元素會自動滾動到下方。

4.通過媒介查詢,為不同設備載入相應樣式

有條件應用樣式:

 <style>
    @media all and(min-width:500px){ ... }
    @media (orientation){ ... }
</style>

代碼解析:

第一行媒體查詢代碼指的是:為寬度大於等於500px的設備設置樣式。

第二行媒體查詢代碼指的是:為縱屏狀態(可見區域大於或等於寬度)下的移動端設備設置樣式。

有條件的載入樣式表:

<head>
    <link rel="stylesheet" href="wide.css" media="screen and(min-width:1024)" />
    <link rel="stylesheet" href="mobile.css" media="screen and(max-width:320)" />
</head>

代碼解析:

第一行媒體查詢代碼指的是:為寬度大於等於1024px的設備,載入wide.css文件。

第二行媒體查詢代碼指的是:為寬度小於等於320px的設備,載入mobile.css文件。

5.使用百分比和rem替換px

除了布局和文本,"自適應網頁設計"還必須實現圖片的自動縮放。

代碼效果對比:

/*使用固定像素*/
.box {
    float: left;
    width: 658px;
    font-size: 72px;
    text-align: center;
    line-height: 195px;
}
/*使用百分比和rem*/
.box {
    float: left;
    width: 60.93%;
    font-size: 1.71rem;
    text-align: center;
    line-height: 4.64rem;
}

代碼解析:

水平方向的值,將具體像素調整為百分比。百分比的計算是根據父級的內容區寬度進行計算的。

例如,父級寬度為1080px, 子級元素為197px,那麼子元素轉換為百分比為:197/1080*100%=18.24%。需要注意的是百分比根據父級計算,當標簽結構級別不同時,計算公式中的「分母」也有所不同,在開發時這個地方很容易出現問題,請務必注意。

垂直方向的值,將具體像素調整為rem,與水平方向相比,垂直方向的計算就比較簡單。例如,行高為195px,HTML標簽當前的字體大小為42px,將行高轉換為rem單位,即195/42= 4. 64rem。

6、響應式網頁設計通常幾個解析度的頁面啊?

頁面的設計與開發應當根據用戶行為以及設備環境(系統平台、屏幕尺寸、屏幕定向等)進行相應的響應和調整。具體的實踐方式由多方面組成,包括彈性網格和布局、圖片、CSS media query的使用等。所以要區別看待。
PSD做1366*768的尺寸,網頁頂部、底部、導航條部分需要百分百寬 內容根據PSD設定具體像素

7、用DreamWeaver做一個響應式網站

您好,這個可是難了,您看看下面的建議,能否對您有幫助:
1、首先我們看下什麼是響應式網頁設計。它為用戶從他們的電腦切換到iPad、iPhone、黑莓、HTC、平板電腦等等,該網站能自動切換適應的解析度,圖像大小和腳本。換句話說,該網站能自動響應用戶的喜好。通俗點說法就是有求必應的網頁!它不僅僅是一種趨勢,而是一個新的設計解決方案!它有助於解決不同的解析度和設備(台式電腦,筆記本電腦,平板,手機)相關的設計問題。
2、其實這個是一個設計問題,既然是設計的問題,這里就會涉及到很多層面的角色,包括交互設計師,視覺設計師,前端工程師,後台開發工程師。交互設計師,要滿足各自不通解析度和設備的頁面布局展現方式。而視覺設計師,則要考慮到頁面性能和移動端帶寬問題,權衡下頁面的酷炫效果和視覺色彩的運用。而前端和後台開發工程師,則要完成滿足視覺需求和交互功能,更要考慮到頁面載入性能和消耗帶寬問題,更重要的是移動端安全性能方面。
3、我們做響應式網頁,首先必須要滿足桌面各個瀏覽器版本下正常顯示頁面。其次才考慮以webkit為內核的手機終端瀏覽器效果。由於IOS和Android瀏覽器都是webkit內核的,這里的響應我們就不考慮ie9以下版本的瀏覽器了。這個例子我們是以GDC博客為原型。它默認一個固定寬度為980px的網頁,當瀏覽器窗口比980px小的時候,這個布局就變為100%比寬度的液態布局,而不是固定寬度。當瀏覽器窗口再縮小於650px的時候,我們就隱藏側邊欄。當窗口小於480的時候,橫向導航條隱藏,換成點擊下拉效果的導航條。
4、響應式網頁設計是一種新的網頁設計思路,我們滿足不同設備下的瀏覽模式,達到俱佳的體驗效果。您可以看看網上的東西,會對您有所幫助的。

8、html5怎麼製作一個響應式網頁?

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

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

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

9、什麼是響應式網頁設計

響應式Web設計(Responsive Web design)的理念是:頁面的設計與開發應當根據用戶行為以及設備環境(系統平台、屏幕尺寸、屏幕定向等)進行相應的響應和調整。具體的實踐方式由多方面組成,包括彈性網格和布局、圖片、CSS media query的使用等。無論用戶正在使用筆記本還是iPad,我們的頁面都應該能夠自動切換解析度、圖片尺寸及相關腳本功能等,以適應不同設備;換句話說,頁面應該有能力去自動響應用戶的設備環境。響應式網頁設計就是一個網站能夠兼容多個終端--而不是為每個終端做一個特定的版本。這樣,我們就可以不必為不斷到來的新設備做專門的版本設計和開發了。

10、什麼是響應式網頁設計?使用了哪些技術?有什麼特點

響應式網頁設計意思就是,把網頁的寬度兼容多解析度的意思。
整體的意思就是把網頁兼容到 SmartPhones, Tablets, Monitors, SmartTV 啊 等等。
技術方面不只是一個,其中最火的就是 CSS3屬性的 media query
特點嘛 UI方便,節省資源,提高速度... 等等

與簡單響應式網頁設計相關的知識