關于響應式web設計

bbbbbb 發布于2019-08-02 15:58 / 2468人閱讀

摘要：手機網站電腦網站平版網站響應式網站在沒有足夠經費跟精力的做一個手機網站的情況下，響應式網站是個不錯的選擇。

手機網站+電腦網站+平版網站 = 響應式網站

在沒有足夠經費跟精力的做一個手機網站的情況下，響應式網站是個不錯的選擇。
它有以下的優點：

減少工作量（網站代碼只要一份，只需要做js方面的改動及可以了）

節省時間（每個設備都得到考慮，搜索也友好）

首先是[][1]的設置：
大多數手機的瀏覽器內核是居于webkit核心，且大多數瀏覽器都支持使用viewport meta元素覆蓋默認的畫布縮放。所以我們可以在head中插入一個meta設置具體的寬度或者縮放比例。

width = device-width 瀏覽器頁面的寬度等于設備的寬度，user-scalable = no,靜止縮放，若為1.0則是：瀏覽器頁面安裝視口大小渲染頁面，maximum-scale minimum-scale 最大最小縮放頁面到設備寬度的幾倍。

針對IE瀏覽器的一些設置，因為css3是響應式關鍵技術，但是IE瀏覽器的支持有限，所以上訴代碼的意思是：
告訴IE瀏覽器，IE8/9及以后的版本都會以最高版本IE來渲染頁面。具體有關這個的可參考這個博客
設置了viewport meta標簽后頁面不縮放了，我們可以根據css3的媒體查詢針對不同視口的寬度進行修正
csss3媒體查詢

@media only screen and (max-width:30em){};
@media only screen and (max-width:50em){};
@media only screen and (min-width:30em) and (max-width:50em){};
@media print{}//打印樣式

最大寬度是50em中寫的樣式，在 30em < width < 50em 中一樣的效果，所以不用重復寫
百分比布局和rem em
使用百分比布局創建流動的彈性界面：
即是將元素固定尺寸轉換為相對尺寸，公式：目標元素的寬度/上下文元素的寬度=百分比寬度，引用自書本《無懈可擊的Web設計》。
當被包裹的元素有border時，若不想border隨上下文變寬或便窄，可以將被包裹元素減去兩邊的border，然后再用那個公式。
同理，padding-left,padding-right,以及margin-right，margin-left的大小也是一樣的道理。
然后就是頁面字體的大小了。
em 相對的也是上下文，rem（root em ）相對的是html根元素，

{
font-size:16px;
font-size:1em;//這三個值效果是相等的效果。
font-size:100%;
}


html{
font-size: 16px;
}
.parent{
font-size: 2px;
}
.son{
font-size: 2em;//son下的字體大小是4px;
}


html{
font-size: 16px;
}
.parent{
font-size: 1rem;//16px;
}
.son{
font-size: 2rem;//32px;
}

//我見一些前輩大都這樣設置,我知道后也比較喜歡這個，
//因為不會像em那樣產生嵌套混亂的問題，也可以很方便的設置24，28這樣數值。
html{
font-size: 62.5%;//也就是(10/16)*100%;
}
.parent{
font-size: 2.4rem;//24px;
}
.son{
font-size:1rem;//10px;
}

彈性圖片

img{
max-width:100%;//自動縮放到與容器100%匹配
}
.side img{
max-width:50%;//特定的某個樣式
}
但是這種會導致圖片在視口很大的時候被拉長，所以可以這樣
.side img{
    width: 30%;
    max-width:100px;
}

響應式圖片（加載與設備相匹配的圖片）


     //srcset用來指向提供的圖片資源,sizes用來表示尺寸臨界點，響應響應式布局

  
  


//IE均不支持，不過Edg兼容模式支持
?

還有就是之前的js來監聽window.resize事件，以及svg，我對svg 不熟，就不說了。
在響應式圖片里面其實還涉及到了物理像素，邏輯像素，dpi等，但我覺得新的方案里面不需要我們寫 1x 2x 那些了，我就寫了先，因為我對這個也只知道大概~
希望下次可以填滿點，如果有錯誤，歡迎指正~

GPU云服務器云服務器響應式設計響應式響應式布局響應式網站

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54442.html

關于響應式web設計

摘要：手機網站電腦網站平版網站響應式網站在沒有足夠經費跟精力的做一個手機網站的情況下，響應式網站是個不錯的選擇。手機網站+電腦網站+平版網站 = 響應式網站在沒有足夠經費跟精力的做一個手機網站的情況下，響應式網站是個不錯的選擇。它有以下的優點：減少工作量（網站代碼只要一份，只需要做js方面的改動及可以了）節省時間（每個設備都得到考慮，搜索也友好）首先是[][1]的設置：大多數手...

morgan 2019-08-29 13:55 評論0 收藏0
重溫"什么是響應式網頁設計？響應式布局的實現原理"

摘要：概念響應式網頁設計最初是由提出的一個概念為什么一定要為每個用戶群各自打造一套設計和開發方案設計應該做到根據不同設備環境自動響應及調整。預計到年，移動互聯網的數據流量將超越端的流量。概念響應式網頁設計最初是由 Ethan Marcotte 提出的一個概念：為什么一定要為每個用戶群各自打造一套設計和開發方案？Web設計應該做到根據不同設備環境自動響應及調整。當然響應式Web設計不僅僅是...

Nekron 2019-08-29 12:28 評論0 收藏0
重溫"什么是響應式網頁設計？響應式布局的實現原理"

摘要：概念響應式網頁設計最初是由提出的一個概念為什么一定要為每個用戶群各自打造一套設計和開發方案設計應該做到根據不同設備環境自動響應及調整。預計到年，移動互聯網的數據流量將超越端的流量。概念響應式網頁設計最初是由 Ethan Marcotte 提出的一個概念：為什么一定要為每個用戶群各自打造一套設計和開發方案？Web設計應該做到根據不同設備環境自動響應及調整。當然響應式Web設計不僅僅是...

Joyven 2019-08-01 16:43 評論0 收藏0
響應式設計個人的一些總結

摘要：所以一個網，甚至是響應式設計，在兩個平臺上都會損害您整體的。三響應式與如果把網站作為一個單獨的網站，如果網站的內容與桌面版的內容相對缺少，導致用戶回到桌面端的網站，會記錄這種選擇，使搜索排名降低，國內百度就不知道會怎樣。一、為什么需要響應式設計（responsible web design） 1. 響應式發展背景 1、屏幕尺寸的快速變化，iphone為320x480，分辨率在未來可以...

LeoHsiun 2019-08-01 15:32 評論0 收藏0