關於響應式web設計

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

在沒有足夠經費跟精力的作一個手機網站的狀況下,響應式網站是個不錯的選擇。
它有如下的優勢:css

  • 減小工做量(網站代碼只要一份,只須要作js方面的改動及能夠了)
  • 節省時間(每一個設備都獲得考慮,搜索也友好)

首先是[<meta>][1]的設置:
大多數手機的瀏覽器內核是居於webkit核心,且大多數瀏覽器都支持使用viewport meta元素覆蓋默認的畫布縮放。因此咱們能夠在head中插入一個meta設置具體的寬度或者縮放比例。html

<meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

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

<meta http-equiv="X-UA-Compatible" content="ie=edge">

針對IE瀏覽器的一些設置,由於css3是響應式關鍵技術,可是IE瀏覽器的支持有限,因此上訴代碼的意思是:
告訴IE瀏覽器,IE8/9及之後的版本都會以最高版本IE來渲染頁面。具體有關這個的可參考這個博客
設置了viewport meta標籤後頁面不縮放了,咱們能夠根據css3的媒體查詢針對不一樣視口的寬度進行修正
csss3媒體查詢web

@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;
}

彈性圖片ide

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

響應式圖片(加載與設備相匹配的圖片)svg

<img class="image" src="a.jpg"
     srcset="480px.jpg 128w, 680px.jpg 256w, 890px.jpg 512w"
     sizes="(max-width: 360px) 340px, 128px">
     //srcset用來指向提供的圖片資源,sizes用來表示尺寸臨界點,響應響應式佈局
<picture>
  <source srcset="1.png" media="(min-width: 400px)">
  <source srcset="2.png" media="(min-width: 800px)">
<img src="a.png" alt="pic">
</picture>
//IE均不支持,不過Edg兼容模式支持
​<picture>
  <source srcset="a.svg" type="image/svg+xml">
  <img src="b.png" alt="pic">
</picture>

還有就是以前的js來監聽window.resize事件,以及svg,我對svg 不熟,就不說了。
在響應式圖片裏面其實還涉及到了物理像素,邏輯像素,dpi等,但我以爲新的方案裏面不須要咱們寫 1x 2x 那些了,我就寫了先,由於我對這個也只知道大概~
但願下次能夠填滿點,若是有錯誤,歡迎指正~佈局

相關文章
相關標籤/搜索