前端頁面如何適應不一樣屏幕分辨率經常使用作法

一、根據幾個瀏覽器分辨率統計平臺獲得數據如今使用1200分辨率如下用戶極少，但咱們CSS佈局時仍然須要至少考慮1024px分辨率用戶

二、使用css media 屬性針對不一樣的屏幕加載不一樣的css

三、好用的幾種經常使用的響應式設計讓圖片自適應的辦法

響應式圖片srcset屬性

img標籤-srcset屬性

agm抄知乎時發現，avatar的img標籤有個陌生的srcset屬性，以下：

1 <img class="Avatar" src="https://pic3.zhimg.com/8622a8eea_s.jpg" srcset="https://pic3.zhimg.com/8622a8eea_xs.jpg 2x" alt="測試用戶1">

翻閱得知此屬性用於：以最合適的src去匹配不一樣屏幕（高分屏低分屏如Retina；大屏小屏）。使用以下：

<img src="source.jpg" srcset="source_2x.jpg 2x, source_3x.jpg 3x">

<img src="source.jpg" width="100%"
  srcset="source_400.jpg 400w, source_600.jpg 600w, source_1280.jpg 1280w">

 2x、3x 表示目標屏幕的像素密度；400w、600w表示目標瀏覽器的寬度的限度，如瀏覽器寬度550w時，匹配600w的src。

精髓能夠是這樣一行CSS代碼：

1 img{ width:100%;height:auto;max-width:100%;display:block;}

img{ width:100%;height:auto;max-width:100%;display:block;}

若是背景圖片，就用background-size，例如：
爲canvas標籤增長自定義背景：

1 #myCanvas {
2 　　background-image: url(${webRoot }/webpage/weixin/images/agency.jpg);
3 　　background-size: 100%;
4 }